因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种。

比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧:

  1. nav {
  2. ul {
  3. margin: 0;
  4. padding: 0;
  5. list-style: none;
  6. }
  7. li { display: inline-block; }
  8. a {
  9. display: block;
  10. padding: 6px 12px;
  11. text-decoration: none;
  12. }
  13. }

1.嵌套输出 nested:

  1. nav ul {
  2. margin: 0;
  3. padding: 0;
  4. list-style: none; }
  5. nav li {
  6. display: inline-block; }
  7. nav a {
  8. display: block;
  9. padding: 6px 12px;
  10. text-decoration: none; }

2.展开输出 expanded:

  1. nav ul {
  2. margin: 0;
  3. padding: 0;
  4. list-style: none;
  5. }
  6. nav li {
  7. display: inline-block;
  8. }
  9. nav a {
  10. display: block;
  11. padding: 6px 12px;
  12. text-decoration: none;
  13. }

其实可以看出来和嵌套输出挺像的,只不过闭合的大括号会另起一行(个人比较喜欢这种)

3.紧凑输出 compact

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

这个也就是所谓的单行CSS格式啦,还是有不少人喜欢这个风格的

    4.压缩输出 compressed:

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

也就是变成了压缩之后的CSS代码,去掉了所有的空格和换行

那么最关键的问题来了,如何在编译sass的时候指定输出风格,接下来我会分享命令行和gulp两种方法:

1.命令行编译:

sass --watch style1.scss:style1.css --style compressed

嘛,其实很简单,就是在原来编译指令的后面加了 --style 输出风格

所以只要依据需求,把compact,compressed这样的参数写在--style后面就行

2.gulp编译:

gulpfile.js代码如下:

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

其实这个大家应该也能看得出来,就是在原本sass()中加了一个参数outputStyle:'编译风格'。

tips:在不指定风格的情况下,默认为嵌套输出。

Sass学习之路(4)——不同样式风格的输出方式的更多相关文章

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

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

  2. gulp-sass设置不同样式风格的输出方法

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

  3. Sass学习之路(1)——Sass简介

    Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等. 那么什么是CSS预处理器? CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些 ...

  4. Sass学习之路:注释、变量以及导入

    前言 由于.sass不兼容CSS代码,所以以下内容完全使用.scss的语法. Sass注释 Sass中除了提供CSS中的标准注释之外,还提供了一种静默注释: /* 我是标准注释 */ // 我是静默注 ...

  5. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  6. Sass学习之路(2)——Sass环境安装(windows版)

    因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...

  7. Sass学习之路(5)——变量

    1.定义变量:Sass中定义变量的关键字是'$'(毕竟程序员缺钱),并使用冒号(:)进行赋值,例如: $width:200px;//定义了一个名为width的变量,值为200px 2.普通变量和默认变 ...

  8. Sass学习之路(3)——Sass编译

    Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤,因为".sass"和".scss"文件并不能直接使用<link>标签引用,最终其实还 ...

  9. Flume学习之路 (三)Flume的配置方式

    一.单一代理流配置 1.1 官网介绍 http://flume.apache.org/FlumeUserGuide.html#avro-source 通过一个通道将来源和接收器链接.需要列出源,接收器 ...

随机推荐

  1. UNIX环境高级编程笔记之文件I/O

    一.总结 在写之前,先唠几句,<UNIX环境高级编程>,简称APUE,这本书简直是本神书,像我这种小白,基本上每看完一章都是“哇”这种很吃惊的表情.其实大概三年前,那会大三,我就买了这本书 ...

  2. 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)

    从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...

  3. SNF开发平台WinForm之八-自动升级程序部署使用说明-SNF快速开发平台3.3-Spring.Net.Framework

    9.1运行效果: 9.2开发实现: 1.首先配置服务器端,把“SNFAutoUpdate2.0\服务器端部署“目录按网站程序进行发布到IIS服务器上. 2.粘贴语句,生成程序 需要调用的应用程序的Lo ...

  4. 论文第5章:Android绘图平台的实现

    面向移动设备的矢量绘图平台设计与实现 Design and Implementation of Mobile Device-oriented Vector Drawing Platform 引用本论文 ...

  5. linux rdate

    检查服务器时间,发现服务器时间与当前时间错了很多.于是调整. 使用ntpdate ,不管如何设置,包括关闭防火期,设置ntp.conf,结果都不成功. 随即使用网上提供的另外一种方法,临时先解决一下燃 ...

  6. how to create a framework for ios . cool!

    预热. http://www.raywenderlich.com/65964/create-a-framework-for-ios http://insert.io/framework-ios8-xc ...

  7. win7激活

    应亲戚要求,装了次win7系统,重新删除分区,格盘,重新划分好分区.完毕.发现系统分区全自动变成动态磁盘.使用win7激活工具时,注意选择使用 小马通用版激活工具. 动态磁盘 稍后解释 小马工具

  8. 【转载】两个排序数组的中位数 / 第K大元素(Median of Two Sorted Arrays)

    转自 http://blog.csdn.net/zxzxy1988/article/details/8587244 给定两个已经排序好的数组(可能为空),找到两者所有元素中第k大的元素.另外一种更加具 ...

  9. bower的使用

    一.bower的安装 安装nodejs的最新版本: 安装npm. 由于npm是nodejs的包管理器,所以在将nodejs安装完成后,npm也就自动安装完成. 安装git. 安装bower. 使用 n ...

  10. linux主机间复制文件

    命令基本格式: 1.从 本地 复制到 远程    * 复制文件:          * 命令格式:                  scp local_file remote_username@re ...