一、sass
1.解决中文报错
在ruby中找到engine.rb文件,在该文件require xxx 后边写上:
Encoding.default_external = Encoding.find('utf-8')
2.作用域对混合以及继承的影响
sass中:
1)定义在作用域内部的混合,在外部无法访问,只能在内部访问
2)定义在作用域内部的继承,在作用域外部是可以访问的,不管该选择器写在任何位置,都可以被继承到
less中:
1)less的混合与sass的继承比较像,less定义在作用域内部的混合,外部不能直接访问,需要通过命名空间进行访问
2)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语句
@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结果执行)