CSS预处理器为CSS增加了编程的特性,如使用变量,简单的逻辑程序,函数等,再编译成css文件,供项目使用。好处:简洁,适应性强,可读性强,易于代码维护。
- Sass:两套语法规则:1. 用缩进作为分割符来区分代码块,可以省略{ } 和 ; 2. 用 { } 作为分隔符 (又称Scss)
- Less:使用{ } 样式嵌套。
- Stylus:主要用来给Node项目进行CSS预处理支持。Stylus同时支持缩进和CSS常规样式书写规则。
特性
变量
sass声明变量 $变量名:变量值
$mainColor:#943; //声明变量
color: $mainCOlor; // 使用变量
less声明变量 @变量名:变量值
@mainColor:#943; //声明变量
color: @mainCOlor; // 使用变量
stylus声明变量 变量名 = 变量值 $变量名 = 变量值;
$mainColor = #943; mainColor = #943; //声明变量
color: $mainCOlor; color: mainCOlor // 使用变量
注意:如果我们使用“@”符号开头来声明(0.22.4)变量,Stylus会进行编译,但其对应的值并不会赋值给变量。换句话说,在Stylus中不要使用“@”符号开头声明变量。
Mixins
Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。Minxins被当做一个公认的选择器,还可以在Mixins中定义变量或者默认参数。
sass的Mixins
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){ 参数$开头,:隔开
border:$borderWidth solid #f00;
color: #f00;
}
/*使用 @include 调用error Mixins*/
.generic-error {
@include error();/*直接调用error mixins*/
}
.login-error {
@include error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/
}
less的Mixins
将mixins看成是一个类选择器
/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){ 参数名以@开头,默认值为2px
border:@borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
.error();/*直接调用error mixins*/
}
.login-error {
.error(5px);/*调用error mixins,并将参数@borderWidth的值重定义为5px*/
}
stylus的Mixins
不使用符号,直接声明
/*声明一个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*/
}
预处理器的作用域:scoped
Sass中没有全局变量概念
stylus,less可以支持全局和局部变相,会向上级查找,找到根为止
嵌套
通过选择器的嵌套来实现继承,减少代码量,增加可读性
{ } 嵌套 ,& 引用父选择器,
继承
sass,stylus的继承:把一个选择器中的样式继承到另一个选择器上,使用@extend
.block {
margin: 10px 5px;
}
p {
@extend .block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
less的继承
不是在选择器上继承,而是将Mixins中的样式嵌套到每个选择器里面。缺点:每个选择器中都会有重复的样式产生。
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
运算
less:
@full_page: 960px;
@half_page: @full_page / 2;
sass可以处理无法识别的度量单位,并将其输出
导入
CSS中 @import 导入样式会增加http请求
@import "reset.css"
持续更新中~
CSS预处理器如Sass, Less和Stylus为CSS引入了变量、Mixins、作用域等功能,提高了代码的可读性和维护性。Sass有两套语法规则,Less使用{ }进行样式嵌套,Stylus同时支持两种规则。预处理器允许变量声明、Mixins复用、作用域控制和嵌套选择器,减少了代码冗余。Sass和Stylus支持@extend实现继承,而Less通过Mixins实现类似功能,但可能导致样式重复。"
126175763,14995715,C++实现抽奖系统,"['C++', '数据结构', '编程算法']
2673

被折叠的 条评论
为什么被折叠?



