sass

一、sass

跟less一样，sass也是一种css预编译语言，由于sass出现的比less晚，因此支持的语法更多，例如循环语句，条件语句等等。sass是通过ruby编译的，因此使用sass要首先安装ruby

安装ruby：

　　Window 系统下，我们可以使用 RubyInstaller 来安装 Ruby 环境，下载地址为：https://rubyinstaller.org/downloads/  或者  请点击这里下载。

　　下载 rubyinstaller 之后，解压到新创建的目录下：

　　双击 rubyinstaller-2.2.3.exe 文件，启动 Ruby 安装向导。

　　点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，直到 Ruby 安装程序完成 Ruby 安装为止。

　　如果安装没有适当的配置环境变量，则需要进行环境变量的配置。

　　安装完成，输入gem -v可以查看版本号

sass属于gem的一个模块，我们可以通过gem安装sass：gem isntall sass

安装完成，提供了sass指令，输入sass -v可以查看版本号，也可以手动安装sass，前提需要sass文件：

　　gem install 将sass文件拖入进来。在开发时，通常写中文注释，但是ruby是日本人开发的，因此编码不涵盖中文字符串，所以要更改字符集：

　　　　进入C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass目录，打开engine.rb文件，（这里指的是默认安装路径，自定义安装路径需自己找）

　　　　在54行，添加Encoding.default_external = Encoding.find('utf-8')　　　　　　　　    

二、拓展名

sass支持两种拓展名

一种是.sass

这种拓展名文件，支持的语法比较新，与stylus类似，省略很多符号，通过空格和缩进设置作用域（模块），跟css差距很大，因此很少使用

一种是.scss

这种拓展名文件，支持的语法跟css语法很相似，因此被很多开发者接受

三、编译

sass跟less一样。浏览器不识别，所以需要编译

1、命令行编译

安装完成sass，可以通过sass指令来编译代码：

　　sass scss文件(sass文件) css文件 配置

　　配置：

　　　　-C 避免输出缓存文件

　　　　--sourcemap=none 避免输出suorcemap文件

　　会生成一个css文件

2、工程化编译sass

对webpack来说sass文件也是资源，是资源就可以模块化打包加载

需要安装sass-loader，使用方式跟less一样（npm install sass-loader）

　　style-loader!css-loader!sass-loader

注意：本地安装sass，sass-loader依赖node-sass，所以也需要安装node-sass（npm install node-sass）

四、.scss的一些语法

1、嵌套语法与&

使用预编译语言最大的特点就是可以使用嵌套式语法，也就是说直接在一个选择器中使用另一个选择器并书写样式

编译的时候会在将内外选择器同时保留，

外部选择器类似命名空间，确保选择器名称不会相互覆盖。

嵌套的时候，我们可以通过&符号获取当前选择器

2、属性嵌套

在sass中支持复合属性嵌套定义

复合属性：一个属性可以代表多个属性的属性

margin:

　　margin-top, margin-bottom, marign-right, margin-left

border:

　　border-width, border-style, border-color，

　　border-top, border-right, border-bottom, border-left，

　　border-top-width, border-top-style, border-top-color，

　　border-right-width, border-right-style, border-right-color，

　　border-bottom-width, border-bottom-style, border-bottom-color

　　border-left-width, border-left-style, border-left-color

复合属性定义的语法：

　　parentProps: { childProps: value; }

 编译后：

3、变量

sass支持变量

　　语法 $key: value;

　　在less中定义变量是@key:value;

全局的变量，任何模块都能使用

局部的变量，只能在当前模块中使用，模块外部无法使用

不支持声明前置，尽量将变量定义在最前面。

4、运算

数学运算：sass支持加减乘除运算，但是运算是有物理意义的

　　加减法：运算时候会做单位转换。保留是第一个加数或者被减数的单位

　　乘法：只能有一个乘数带单位

　　除法：默认不会执行除法。在css中，font属性的属性值可以是字号比行高，所以/默认不执行除法，想执行除法，必须满足三个条件之一

　　　　1 必须有()

　　　　2 必须出现变量或者方法的返回值

　　　　3 是表达式的一部分（除了除法，还有其它的运算）

　单位：10 / 2  10是被除数， 2是除数

　　如果被除数有单位，除数单位可有可无，有单位单位抵消。

　　如果被除数没有单位，除数一定不能有单位

色彩运算：　　　　　　　　　　　　　　　　　　　　　　

　　在sass中，色彩可以进行运算

　　必要条件是：色彩的透明度必须一致

　　运算的时候，每个通道单独运算的，透明度通道不运算

　　运算过程中，通道之间不会进位或者借位

　　一个通道的值只能在0-255（00-ff）之间

字符串运算：

　　sass允许字符串，就是字符串拼接

5、混合

sass中的混合也是为了复用一组样式

语法：@mixin 混合名称 {

　　　　　// 定义样式

　　　 }

使用混合： @include 混合名称;

特点：

1 混合在编译的时候，删除了，当多次使用混合的时候，并没有合并选择器，是真正的复制。

2 不支持声明前置，外部的混合内部不能使用

所以sass中的混合相当于less中的方法

混合传参

定义参数的语法，跟定义变量的语法是一样的，并且可以传递默认参数

语法：@mixin 混合名称($arg1: val1, $arg2: val2) {

　　　 　　// 定义样式

　　　 }

使用混合：@include 混合名称(val1, val2);

　　如果定义了默认参数，使用混合的时候，可以不用传递参数

　　如果是一个参数都不传递，则可以省略参数集合

　　如果没有定义默认参数，使用混合的时候，必须传递参数

获取剩余参数

在less中获取所有参数用@argumetns

在sass中获取剩余参数语法跟ES6语法相似，使用三个点语法

sass中，三个点语法在变量之后：@mixin demo($arg1, $arg2, $arg...) {}

　　arg获取从第三个参数后面所有的参数。前面的参数可以正常使用

兼容浏览器，有时候，通常我们为了将css3样式兼容所有浏览器，而添加浏览器前缀，要书写很多遍。

此时我们可以通过混合复用样式，提高开发效率，通常将混合名称定义成css样式名称，并且在混合中，只设置一个样式

 编译后：

6、继承

为了复用选择器的样式，sass提供了继承，跟less中的混合是一样的

　　less中的方法是sass中的混合

　　less中的混合是sass中的继承

定义继承就是定义选择器，sass支持四类继承选择器：

　　类选择器，id选择器，元素名称选择器，自定义元素名称选择器

使用继承：@extend 继承选择器;

特点：

　　1 继承的选择器在编译的时候会保留

　　2 编译的时候，合并了选择器，而不是复制样式，相对来说效率更高

如果不想在编译的时候保留选择器样式，我们可以使用选择器占位符%，在选择器前面添加%占位符，此时该选择器在编译的时候会删除

注意：只有元素名称选择器和自定义元素名称选择器可以使用%占位符，id选择器和类选择器无法使用

　　    一旦添加占位符，@extend 继承选择器的时候，也要添加占位符

sass中的继承支持声明前置，所以尽量将他们定义在最前面

局部继承，当前模块可以使用，其他模块可以直接使用，但是有意想不到的结果，所以不建议使用局部的继承

7、插值与引入文件

sass插值语法： #{$key}

跟less一样，sass中的插值有三种用法：

　　1 在字符串中插值

　　2 在选择器上插值

　　3 在属性名称上插值

引入文件有两种方式

　　css文件引入方式： @import url(url) 

　　sass文件引入方式：@import url 

8、条件语句

sass支持if条件语句，语法跟js中的if条件语句类似

　　js中条件语句 if () {} else {}

　　sass中条件语句 @if {} @else {}

对比js语法

相同点：

　　1 关键字（js： if, else if, else。sass: @if, @else if, @else）；

　　2 条件体：都是通过{}定义；

　　3 比较运算符：>, <, >=, <=, ==

不同点：

　　1 js中，条件定义在条件集合()中, sass不需要()。直接写条件；

　　2 逻辑运算符

　　　　js 中 “与”用“&&”表示，“或”用“||”表示

　　　　sass 中 “与”用“and”表示， “或”用“or”表示

9、循环语句

跟js中的for循环一样，sass也支持循环语句，也用@for关键字定义，有两种语法

　　@for $i from start through end {}

　　@for $i from start to end {}

　　　　@for：表示循环语句关键字

　　　　$i：表示循环变量

　　　　from，through，to：都是循环关键字

　　　　start：表示循环的起始值

　　　　end：表示循环的终止值 默认每次循环增量都是1

　　through与to的区别是：

　　　　through：最后一次循环包含end值

　　　　to：最后一次循环不包括end值

循环语句通过{}定义了代码块，因此循环语句中定义的变量，外部无法使用

 还可以利用循环语句实现bootstrap栅格系统：

10、while 循环

在for循环中，增量始终是1，无法改变，如果想自定义循环增量，可以使用while循环

语法：

　　定义循环变量

　　@while 循环条件 {

　　　　定义循环体（定义样式）

　　  }

由于循环变量定义在了循环外部，因此在循环外部可以继续使用循环变量

11、枚举循环

for循环的循环增量是1，while循环中可以自定义循环增量，但是循环增量始终是固定的，如果想循环一个没有规律的聚合数据，可以使用枚举循环

语法：@each $i in 枚举体 {}

　　@each 枚举循环关键字

　　$i 是循环变量

　　in 循环关键字

　　枚举体：多个个体用逗号隔开

注意：如果枚举的个体命中了sass内置的数据变量，如red，green，blue等，使用的时候，要添加引号

12、三元运算符

在js中，?:是一个三元运算符（是对if语句的简写）

sass提供了if方法，可以实现该功能

　　if(condition, trueValue, falseValue)

　　　　condition值为真，结果是truevalue

　　　　condition值为假，结果是falsevalue