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<5{
.item-#{$i}{width:2em*$i;}
$i:$i+1;
}
以上代码将被编译成
.item-1 {width: 2em; }
.item-2 {width: 4em; }
.item-3 {width: 6em; }
.item-4 {width: 8em; }
@each
@each指令同样可以用于循环输出，和@for的区别在于，@each是通过遍历list或者map实现循环输出的。
@each $member in a,b,c,d{
.#{$member}{
background-image:url("/images/#{$member}.jpg");
}
}
以上代码将被编译成
.a{background-image:url("/image/a.jpg");}
.b{background-image:url("/image/b.jpg");}
.c{background-image:url("/image/c.jpg");}
.d{background-image:url("/image/d.jpg");}
5、3自定义函数
sass允许用户自定义函数
@function double($n){
@return $n*2;
}
div{
width:double(5px);
}
以上代码将被编译成
div{width:10px}
在我们的项目中经常会被用来计算百分比，或者根据html元素的font-size大小来计算rem
比如
@function to_rem($px){
@return $px/50 + rem;
}
.a{width:to_rem(30);}
以上代码将被编译成：
.a{width:0.6rem}
本文整理自网络及《sass与compass实战》，之后将继续完善更新。
参考文章:Sass的表达式和控制命令
