sass（Syntactically Awesome Style Sheets）是一个css预处理器，提供了许多便利的写法。sass坚持了DRY（don`t repeat yourself）的原则，它可以提高css的开发效率，并使css更利于维护。
安装gulp-sass插件安装命令如下
npm install gulp-sass --save-dev
sass有两种后缀文件名.sass和.scss
使用.sass的时候不能使用大括号，使用回车和至少两个空格来区分选择器和规则
示例：
p color:#f00;b background:#ddd;
使用.scss时，基本和平时写css差不多，使用大括号来区分选择器和规则。正因为scss可以兼容css,更符合我们平常的书写习惯，所以一般我们都采用scss为后缀名。
示例：
p{ color:#f00;}b{ background:#ddd;}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插件的用法，请点击这里跳转
所有变量以$开头,sass使用冒号(:)来定义一个变量。
$blue:#1875e7;div{ color:$blue;}以上代码将被编译成
div{color:#1875e7;}如果变量需要嵌在字符串中，就必须写在#{}中
$side:left; div{ border-#{side}-radius:5px;}以上代码将被编译成
div{border-left-radius:5px;}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%;}就是我写代码是最最常用的用法ps:属性也可以嵌套，比如：
p{ border:{ color:red; }}注意：border后面必须加上冒号
sass中有两种注释
//......(编译后被省略)/*......*/（保留到编译后）
sass允许一个选择器继承另一个选择器
.class1{}.class2{ @extend .class1; .......}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);}sass提供了一些内置的颜色函数，以便生成系列颜色
lighten(#ccc,10%);darken(#ccc,10%);grayscale(#ccc);complement(#ccc);
@import命令，插入外部文件@import "......";@import可以导入css文件，也可以导入sass文件导入css文件，仍是以@import存在，这种方式在css中是不推荐使用的，因为，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。导入sass文件的时候，在编译的时候实际是把两个sass文件合并，编译成一个css文件。
@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;}@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");}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的表达式和控制命令
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
