SASS补充

一，sass

1,解决中文报错

在ruby中找到engine.rb文件，在该文件require XXXX 后边写上：

'Encoding.default_external = Encoding.find("utf-8")'

2,作用域对混合以及继承的影响

sass中：

定义在作用域内部的混合，在外部无法访问，只能在内部访问

定义在作用域内部的继承，在作用域外部是可以访问的，不管改选择器写在任何位置，都可以被继承到

less中：

less的混合与sass的继承比较像，less定义在作用域内部的混合，外部不能直接访问，需要通过命名空间进行访问

less的方法和sass的混合比较像，less定义在作用域内部的方法，在外部不能直接访问，需要通过命名空间访问

3，占位符

我们自定义一个选择器样式，用于继承，继承结束，我们可以使用选择器，删掉他

此时可以使用占位符，表示一组临时属性，当编译结束就被删除

占位符只能用于标签选择器，其他选择器不能用

语法：

%div{}

%mydiv{}

4，数字运算

sass中也有+ - * / 运算，可以进行数字变量之间的运算，可以带单位运算

带有单位运算时，默认是px,哪个单位在前边，最终结果就一那个单位为标准

注意：除法有点特殊：

1）加上()；

2）变量或者是函数返回的结果

3）除法运算只是表达式的一部分

满足以上任何一个条件都可以

5,色彩运算

sass中支持色彩的加减乘除，注意除法要满足上边的数学运算中的条件

16进制的色彩运算，每个通道进行独立运算，如果十六进制色彩每个通道的值大于255或者小于0，不会影响其他通道,大于255取255，小于0取0

在rgba模式下，进行运算时，要求透明度必须一致否则无法运算，最终结果不会影响透明度

6，插值与字符串拼接

插值：

为了动态创建属性

语法：

#{$dir}

字符串拼接：

+ 拼接两个字符串，没有''

no + -repeat

$re: -repeat

no + $re

7,if语句

语法:

@if 定义if语法

@else if 定义 else if 语法

@else 定义 else语法

or 或 and 与 not 非

判断相等使用：==

<= >= < >

8,for循环

语法：

@for $i from start through end{

//循环体

}

@for ： 定义for

$i : 循环变量

start：$i 的初始值，包括start

end:$i 的结束值，包括end

from：从哪里开始

through：到哪里结束

9，while 循环

语法：

@while 条件{}

$i : 0;

@while $i < 20{

//循环体

$i:$i+1;

}

10,三元运算符

if(条件,true结果执行，false结果执行)