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实现循环输出的。
@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}