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的表达式和控制命令