sass最终输出的样式包括下面几种样式风格:
嵌套输出方式 nested
展开输出方式 expanded 
紧凑输出方式 compact 
压缩输出方式 compressed

sass:

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
} li { display: inline-block; } a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

  

设置为展开输出方式nested(默认输出):

var gulp = require('gulp');
var sass = require('gulp-sass'); gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'nested'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

编译出来的css样式风格默认为嵌套输出:

nav ul {
margin: 0;
padding: 0;
list-style: none; }
nav li {
display: inline-block; }
nav a {
display: block;
padding: 6px 12px;
text-decoration: none; }

  

设置为展开输出方式expanded:

gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

输出样式风格为:

nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

  

设置为展开输出方式compact:

gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compact'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

输出样式风格为:

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

  

设置为展开输出方式compressed:

gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

输出样式风格为:

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

  

本文标题:gulp-sass设置不同样式风格的输出方法

原创作者:Jiao Shou

发布时间:2016年09月28日 - 14:45

最后更新:2016年09月28日 - 20:36

原始链接:http://www.cnblogs.com/jiaoshou/p/5917361.html

许可协议:转载本篇文章时请务必以超链接形式标明文章原文链接和作者信息。

扫描二维码,分享此文章

gulp-sass设置不同样式风格的输出方法的更多相关文章

  1. [Sass]不同样式风格的输出方法

    [Sass]不同样式风格的输出方法 众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写.在 Sass 中编译出来的样式风格也可以按不同的样式 ...

  2. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

  3. Sass学习之路(4)——不同样式风格的输出方式

    因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种. 比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧: nav { ...

  4. canvas设置线条样式

    canvas设置线条样式 合法属性和方法 lineWidth = value 设置线宽 lineCap = type 设置线端点样式 lineJoin = type 设置线交合处样式 setLineD ...

  5. Response输出excel设置文本样式

    在网上查了些Response导出excel然后设置样式的方法,发现没有一个可行的于是开始自己研究, 发现可以通过输出样式的方式进行配置,我要设置的是全文本格式在excel样式是这样的mso-numbe ...

  6. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

  7. PHP团队 编码规范 & 代码样式风格规范

    一.基本约定 1.源文件 (1).纯PHP代码源文件只使用 <?php 标签,省略关闭标签 ?> : (2).源文件中PHP代码的编码格式必须是无BOM的UTF-8格式: (3).使用 U ...

  8. asp.net数据导出到excel表格,并设置表格样式

    1.首先在项目中添加引用

  9. bootstrap 预定义样式风格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. package包

    为什么需要package? 为了解决类之间的重名问题.为了方便管理类,合适的类放在合适的包. 怎么用package? 通常是类的第一句非注释性语句. 包名,域名倒着写,加上模块名,并与内部管理类. 命 ...

  2. Codeforces Round447 D树上前缀和

    已知完全二叉树和每条边的权值,q次询问,每次给出sta起点和H. w=(H-点到sta的权值),求w>0的所有w的加和. 这题用树上前缀和来写,e[i]记录子树上的点到点i的距离,sum[i][ ...

  3. 论AMD内核如何使用Android Studio虚拟机

    其实之前和老师求证过AMD内核要用虚拟机的话应求助第三方模拟器(不然速度太慢)或直接使用真机测试,当时拿着虚拟机的报错简单搜索了下只翻到了一个用谷歌第三方工具的(检索时关键词不对的锅),觉得麻烦就没去 ...

  4. Docker Stack 学习笔记

    该文为<深入浅出Docker>的学习笔记,感谢查看,如有错误,欢迎指正 一.简介 Docker Stack 是为了解决大规模场景下的多服务部署和管理,提供了期望状态,滚动升级,简单易用,扩 ...

  5. Angular文件基本结构

    main.ts(应用程序主入口) → app.module.ts app.module.ts //这个根模块会告诉Angular如何组装该应用 //引入模块 import { BrowserModul ...

  6. (办公)记事本_grep文本搜索命令

    参考谷粒学院的linux视频教程:http://www.gulixueyuan.com/course/300/task/7091/show grep文本搜索命令:[是一种强大的文本搜索工具,它能使用正 ...

  7. 数组工具Array的基本使用

    /* * Arrays数组工具的基本使用 */import java.util.Arrays; public class Day02_03 {    public static void main(S ...

  8. Windows配置JDK环境

    在系统变量里新建JAVA_HOME变量,变量值为:D:\Program Files\Java\jdk1.8.0_161(根据自己的安装路径填写) 在系统变量里新建classpath变量,变量值为:;% ...

  9. 【笔记】机器学习 - 李宏毅 - 12 - CNN

    Convolutional Neural Network CNN 卷积神经网络 1. 为什么要用CNN? CNN一般都是用来做图像识别的,当然其他的神经网络也可以做,也就是输入一张图的像素数组(pix ...

  10. SpringCloud(一)

    什么是SpringCloud? Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均 ...