一、预编译语言简介
sass:2007年诞生,最早的CSS预处理器,拥有Ruby社区支持和Compass这一强大的Css框架,目前受less影响,已经进化到了全面兼容Css的Scss。
less:2009年出现,受sass的影响较大,但又使用css的语法,在Ruby社区之外支持者远超过sass。缺点是比起sass来,可编程功能不够,不过优点是简单和兼容Css,反过来也影响了SASS演变到了Scss的时代。
stylus:2010年产生,是Css的预处理框架,来自Node.js社区,主要用来给node项目进行css预处理支持。
二、基本使用及区别
(1)基本使用
基本一致,区别是Sass和Stylus可以用没有大括号的方式书写
(2)嵌套
语法一致,甚至连引用父级选择器的标记&也相同,区别只是Sass和Stylus可以用没有大括号的方式书写。
(3)变量声明
less声明的变量以@开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号:分隔开。
@red:#c00;
strong{
color:@red;
}
sass声明的变量与less类似,只是变量名前要使用$开头:
$red:#c00;
strong{
color:$red;
}
stylus声明的变量没有任何的限定,可以使用$开头,结尾的分号;可有可无,但变量和变量值直接需要使用=。在stylus中我们不建议使用@符号开头声明变量。
red=#c00
strong
color:red
(4)作用域
Css预编译器把变量赋予作用域,也就是存在生命周期,就像js一样,它会先从局部作用域查找变量,依次向上级作用域查找。
sass中不存在全局变量:
$color:black;
.scoped{
$bg:blue;
$color:white;
color:$color;
background-color:$bg;
}
.unscoped{
color:$color;
}
编译后,scoped中的color为white,background-color值为blue。unscoped中的color为white。
.scoped{
color:white;
background-color:blue;
}
.unscoped{
color:white;
}
less和stylus作用域与js相似,首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级往上查找,直到根为止。
@color:black;
.scoped{
@bg:blue;
@color:white;
color:@color;
background-color:@bg;
}
.unscoped{
color:@color;
}
编译后scoped中color为white(调用局部变量),unscoped中color为black(调用全局变量)
.scoped{
color:white; (局部变量)
background-color:blue;
}
.unscoped{
color:black;(全局变量)
}
(4)混入
less:在一个类A中引入另一个类B,在类B中可以使用@定义变量。
.b(@color:red){
color:@color;
}
.a{
.b(red);
}
sass:需要使用@mixin。后面紧跟mixin的名,也可以设置参数,参数名为变量$声明的形式。
@mixin large-text{
font:{
family:Arial;
size:20px;
weight:bold;
}
color: #ff0000;
}
.page-title{
@include large-text;
padding:4px;
margin-top:10px;
}
stylus中的混合和前两款css预处理语言的混合略有不同,可以不使用任何符号,就是直接声明mixin名,然后在定义参数和默认值之间用等号(=)来连接。
error(borderWidth=2px){
border:borderWidth solid #f00;
color:#f00;
}
.generic-error{
padding:20px;
margin:4px;
error();
}
.login-error{
left:12px;
position:absolute;
top:20px;
error(5px);//调用error mixins,并将参数$borderWidth的值指定为5px
}
(5)代码模块化
模块化即将css代码分成一个个模块,scss、less和stylus三者的使用方法都是 @import '文件路径'