sass（syntactically awesome style sheets）是一个css预处理器，提供了许多便利的写法。sass坚持了dry（don`t repeat yourself）的原则，它可以提高css的开发效率，并使css更利于维护。
1、安装
安装gulp-sass插件安装命令如下
- npm install gulp-sass --save-dev
登录后复制
2、使用
sass有两种后缀文件名.sass和.scss
使用.sass的时候不能使用大括号，使用回车和至少两个空格来区分选择器和规则
示例：
- p color:#f00;b background:#ddd;
登录后复制
使用.scss时，基本和平时写css差不多，使用大括号来区分选择器和规则。正因为scss可以兼容css,更符合我们平常的书写习惯，所以一般我们都采用scss为后缀名。
立即学习“前端免费学习笔记（深入）”；
示例：
- p{ color:#f00;}b{ background:#ddd;}
登录后复制
gulp-sass的使用
- var gulp = require('gulp');var gulp-sass = require('gulp-sass');gulp.task('sass',function(){ gulp.src('./sass/**/*.scss') .pipe(sass(outputStyle:'compressed')) .pipe(gulp.dest('./css'));});
登录后复制
以上为gulp-sass的基本用法，即引用gulp和gulp-sass插件，然后读取scss文件进行编译，输出格式为compressed，并将编译成功的css文件输出到css文件夹。
欲了解更多关于gulp-sass插件的用法，请点击这里跳转
3、基本用法
3.1 变量
所有变量以$开头,sass使用冒号(:)来定义一个变量。
- $blue:#1875e7;div{ color:$blue;}
登录后复制
以上代码将被编译成
- div{color:#1875e7;}
登录后复制
如果变量需要嵌在字符串中，就必须写在#{}中
- $side:left; div{ border-#{side}-radius:5px;}
登录后复制
以上代码将被编译成
- div{border-left-radius:5px;}
登录后复制
3.2计算功能
sass允许在代码中使用算式。sass中的算术操作符有：
加(+) 减(-) 乘(*) 除(/) 取余(%)
注意上面的操作符只能用于单位相同的数值运算。
- h2{ font-size:5px+2em;//错误！！！编译报错 font-size:5px+2;//7px}
登录后复制
此外，两个相同单位的数值相乘无法生成有效的css
- h2{font-size:5px*2px;}//invalid css
登录后复制
/操作符本身就是css简写语法的一部分如：font:16px/24px Arial;但是sass重载了这个运算符，用于执行除法操作，下面让我们看它是如何解析的：
- h2{ //不执行除法操作，原样输出 font-size:16px/24px; //使用差值语法之后，原样输出 font-size:#{$base-size}/#{$line-height}; //使用括号包裹之后，执行除法操作 font-size:(16px/24px); //使用变量，执行除法操作 font-size:$base-size/$line-height; //调用函数，执行除法操作 opacity:random(4)/5; //使用算术操作符，执行除法操作 padding-right:2px/4px+3px;}
登录后复制
操作符的优先级：
括号优先级最高 乘法，除法优先于加法，减法
写一个简单的计算示例：
- $var:2;body{ margin:(14px/2); top:50px+100px; right:$var*10%;}
登录后复制
以上代码将被编译成
- body{margin:7px;top:150px;right:20%;}
登录后复制
3.3嵌套
就是我写代码是最最常用的用法ps:属性也可以嵌套，比如：
- p{ border:{ color:red; }}
登录后复制
注意：border后面必须加上冒号
3.4注释
sass中有两种注释
- //......(编译后被省略)/*......*/（保留到编译后）
登录后复制
4、代码的重用
4、1继承
sass允许一个选择器继承另一个选择器
- .class1{}.class2{ @extend .class1; .......}
登录后复制
4.2 Mixin
Mixin有点像C语言的宏，是可以重用的代码块使用@Mixin定义一个代码块
- @mixin left{ float:left; margin-left:10px;}
登录后复制
使用@include命令，调用mixin
- div{ @include left}
登录后复制
mixin的强大之处在于，可以指定参数和缺省值
- @mixin left($value:10px){ float:left; margin-right:$value;}
登录后复制
使用的时候加入参数
- div{ @include left(20px);}
登录后复制
4.3 颜色函数
sass提供了一些内置的颜色函数，以便生成系列颜色
- lighten(#ccc,10%);darken(#ccc,10%);grayscale(#ccc);complement(#ccc);
登录后复制
4.4插入文件
@import命令，插入外部文件@import “……”;@import可以导入css文件，也可以导入sass文件导入css文件，仍是以@import存在，这种方式在css中是不推荐使用的，因为，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。导入sass文件的时候，在编译的时候实际是把两个sass文件合并，编译成一个css文件。
5、高级用法
5、1条件语句
@if…@else….
- @mixin txt($weight){ @if $weight == bold {font-weight:bold;} @else if $weight == light {font-weight:100;} @else if $weight == heavy {font-weight:900;} @else {font-size:normal;}}.txt1{ @include txt(bold); }.txt2{ @include txt(light); }.txt3{ @include txt(heavy); }
登录后复制
以上代码将被编译成：
- .txt1{font-weight:blod;}.txt2{font-weight:100;}.txt3{font-weight:900;}
登录后复制
5、2循环语句
@for@for有两种使用方式:from start to end，遍历范围[start,end-1]from start through end，遍历范围[start,end]
- @for $i from 1 to 10{ .border-#{$i}{ border:#{$i}px solid blue; }}
登录后复制
这段sass代码会被编译成
- .border-1{border:1px solid blue;}.border-2{border:2px solid blue;}.border-3{border:3px solid blue;}.border-4{border:4px solid blue;}.border-5{border:5px solid blue;}.border-6{border:6px solid blue;}.border-7{border:7px solid blue;}.border-8{border:8px solid blue;}.border-9{border:9px solid blue;}
登录后复制
@while
- $i:1; @while $i
以上代码将被编译成
.item-1 {width: 2em; }.item-2 {width: 4em; }.item-3 {width: 6em; }.item-4 {width: 8em; }登录后复制
@each@each指令同样可以用于循环输出，和@for的区别在于，@each是通过遍历list或者map实现循环输出的。
登录后复制
以上代码将被编译成
登录后复制
5、3自定义函数
sass允许用户自定义函数
登录后复制
以上代码将被编译成
登录后复制
在我们的项目中经常会被用来计算百分比，或者根据html元素的font-size大小来计算rem比如
登录后复制
以上代码将被编译成：
登录后复制
本文整理自网络及《sass与compass实战》，之后将继续完善更新。参考文章:Sass的表达式和控制命令
