写在前面乱七八糟的前言：emmm，最后还是决定把Sass与Less单独出来写成一篇，可能会稍微好辣么一丢丢？
目录
5、Sass
6、Less
7、Sass与Less的区别
8、Stylus
4、Sass（Syntactically Awesome Style Sheets）
4.1
4.2安装：
4.2.1安装ruby环境
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量
在命令行输入gem install sass
4.2.2使用sass
在屏幕上直接转化：sass test.scss
转化成文件：sass test.scss test.css
4.2.3监听
//watch a file
sass --watch test.scss：test.css
//watch a directory
sass --watch ./sass：./css
4.2Sass使用：
4.2.1变量：声明：$变量名：变量值；调用：$变量名
ps：若变量名需在字符串内嵌套，则需使用#[ ]包裹；
$side：left;
.test{
border-#{$side}-radius：5px；
}
4.2.2运算
单位会进行运算，需注意最终单位
4.2.3嵌套：
4.2.3.1选择器嵌套
ul{
li{ }
}
4.2.3.2属性嵌套
border：{
color：red；
width：10px；
}
4.2.3.3伪类嵌套
ul{
li{
&：hover{ }
}
}
4.2.4混合
声明：@mixin name（$param:value）{ }；调用：@include name（value）
ps：声明时可带参可不带，可带默认值，但调用需符合命名规范
优点：可传参，不会生成同名class
缺点：将混合代码copy到对应的选择器中
4.2.5继承（Inheritance）
声明：.class{ }调用：@extend .class
优点：继承相同代码并提取到并集选择器中
缺点：不可传参，在CSS中生成一个同名class
通常都是p，ul{ common style}，往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦
4.2.6占位符
声明：%class{ }调用：@extand %class
优点：继承相同代码并提取到并集选择器，不会生成同名的class选择器
缺点：无法传参
ps：传参用混合，先有class用继承，无须参数无须class用占位符
4.2.7if条件
@if{ }
@else{ }
4.2.8for循环
@for $i from 1 to 10{ }不含十；
@for $i from 1 through 10{ }含十；
4.2.9while循环
$j：1；
@while $j<10{
.while#{$j}{
border：#{$j}px solid red;
}
$j:$j+1；
}
4.2.0each循环遍历
@each item in a，b，c，d{
//item 表示每一项
}
4.2.11函数
@function func（$length）{
$length：$length*5；
@return $length；
}
调用：func（10px）；
5、Less
5.1Less产生：
5.2Less优势：
让开发者平滑地从现存CSS文件过渡到LESS，而无需像Sass一样将CSS文件转换成Sass
5.3Less使用：
5.3.1变量：声明变量：@变量名：变量值；
5.3.2混合（MiXins）：
将部分样式抽出，作为单独定义的模板，被多选择器调用，如某段样式经常用到多个元素时，需重复写多次，则可使用
Sass：
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { @include error();/*直接调用error mixins*/ } .login-error { @include error(5px);/*调用error mixins，并将参数$borderWidth的值重定义为5px*/ }
Less：
/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00; color: #f00; } /*调用error Mixins*/ .generic-error { .error();/*直接调用error mixins*/ } .login-error { .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/ }
5.3.2.1无参混合：声明：.name{ }；调用：调用选择器
5.3.2.2带参混合：
5.3.2.2.1无默认值声明：.name（@param）{ } 调用：name（parValue）； parValue不可省
5.3.2.2.2有默认值声明：.name（param：value( )）{ } 调用：name（parValue）； parValue可省
ps：无参混合会在CSS中编译同名的class选择器，带参的不会。
5.3.3嵌套（Nesting）：
保留Html中的代码结构，默认后代选择器
需子代选择器，则在子代前加>
&表示上一层
5.3.4运算（Operations）
+-×÷，可带单位可不带
颜色运算时，红绿蓝分三组计算，组内可进位，组间互不干涉。
函数
颜色函数
导入
在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突
注释（Comment）
CSS预处理器语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的CSS注释之外，还具有单行注释，只不过单行注释不会被转译出来。
a)Sass、LESS和Stylus的多行注释
多行注释和CSS的标准注释，他们可以输出到CSS样式中，但在Stylus转译时，只有在“compress”选项未启用的时候才会被输出来。
/*
*我是注释
*/
body
padding 5px
b)Sass、LESS和Stylus的单行注释
单行注释跟JavaScript语言中的注释一样，使用双斜杠（//），但单行注释不会输出到CSS中。
-
//我是注释
-
-
在Stylus中除了以上两种注释之外，他还有一种注释，叫作多行缓冲注释。这种注释跟多行注释类似，不同之处在于始的时候，这里是”/*！”。这个相当于告诉Stylus压缩的时候这段无视直接输出。
/*!
*给定数值合体
*/
add(a, b)
a + b
6、Sass与Less
6.1编译环境：
Sass需要安装ruby环境，是服务端处理的
Less需node js环境，引入less.js，是客户端处理的
6.2变量符
Sass用$
Less用@
6.3输出设置
Sass：四种输出风格，默认nested
nested：嵌套缩进
expanded：展开多行
compact：简洁格式
compressed：压缩
Less：无
6.4条件语句
Sass：if、else、for
Less：无
6.5工具库
Sass：Compass，基于Sass的封装
Less：UI组件库Bootstrap
6.6文件转译
Sass：源文件不能给浏览器直接识别，需转译为css
Less：源文件无需转译为css
6.7作用域
Sass：无全局作用域，定义相同变量名时，在调用要注意
Less：首先定义局部定义的变量，若无，像冒泡一样一级级往下查找，直到根为止