CSS预处理器
CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)，
CSS预处理器可以让你的 CSS 更加简洁，适应性更强，代码更直观等诸多好处
简而言之: CSS预处理器就是升级版CSS
常见的CSS预处理器： Less、 Sass 、Stylus
SASS(Syntactically Awesome Stylesheets Sass)、
SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.
它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
LESS和SASS文件后缀名区别
LESS以.less结尾
SASS以.sass或者.scss结尾
两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号
.scss以{}表示层级结构, 语句后面需要写分号
企业开发中推荐使用**.scss结尾**
注意点: scss需要大括号和分号结尾。
sass中注释
ASS中的注释和LESS一样
单行注释不会被编译(不会出现在编译后的文件中)
多行注释会被编译 (会出现在编译后的文件中)
SASS中的变量
1.SASS中的变量
SASS中的变量和LESS中一样, 只是定义格式不同
LESS中定义变量 @变量名称: 值;
SASS中定义变量 ==$变量名称: 值;==
2.SASS中变量特点
SASS中变量特点和LESS中几乎一样
2.1 后定义覆盖先定义
2.2 可以把变量赋值给其它变量
2.3 区分全局变量和局部变量(访问采用就近原则)
注意点: LESS中变量是延迟加载, 可以先使用后定义
SASS中变量不是延迟加载, 不可以先使用后定义
SASS中的变量插值
1.什么是变量插值?
如果是属性的取值，可以直接使用变量,
但是如果是属性名称或者选择器名称，并不能直接使用变量, 必须使用变量插值的格式
2.SASS中的变量插值
SASS中的变量插值和LESS中也一样, 只不过格式不一样
LESS变量插值格式: @{变量名称}
SASS变量插值格式: #{$变量名称}
SASS中的运算
SASS中的运算和LESS也一样, 都支持+ - * / 运算
注意点: 无论是LESS中的运算还是SASS中的运算都需要加上()
任意前后任一个需要带上单位（200px /2）或者（200 /2px）
SASS中的混合
SASS中的混合和LESS中也一样, 只是定义格式和调用的格式不同
LESS中混合定义: .混合名称{} 或者 .混合名称==()=={}
LESS中混合调用: .混合名称; 或者 .混合名称==()==
SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
SASS中混合调用: @include 混合名称; 或者 @include 混合名称();
|
