saas(sccs)、less、stylus三者的区别
在用css写样式的时候,我们可以发现css是存在着挺多的问题的,列举一二如下:
1、css语法不够强大,比如css的选择器无法进行嵌套,导致css中存在较多重复的选择器语句;
2、css无法定义变量以及没有合理的样式复用机制,导致整体css样式难以维护;
于是,css预处理器应运而生,目前较为常用的sass(scss)、stylus、less都是其中的佼佼者,我在项目中曾用过其中的scss和stylus,今天来总结一下它们的区别。
一、变量
- Sass声明变量必须是$开头,后面紧跟变量名和变量值,而且变量名和变量值需要用冒号(:)分隔开;
- Less声明变量用@开头,其余等同Sass;
- stylus中声明变量没有限定,但变量名和变量值之间必须要有等号;
二、嵌套
三种预处理器的选择器嵌套在使用上来说没有任何区别,引用父级选择器的标记&也相同
三、继承
1.Saas和Stylus的继承如出一辙,能把一个选择器的所有样式继承到另一个选择器上,使用@extend开始,后面接被继承的选择器;
2.Less独树一帜地用伪类来描述继承关系;
四、导入@import的区别
1.Saas中只能使用url()表达式引入时进行变量插值;
$device:mobile;
@import url(style.#{$device}.css);
2.Less中可以在字符串中进行插值;
@device:mobile
@import "styles.@{device}.css";
3.Stylus中无法使用插值,但可以利用字符串拼接来实现;
device="mobile";
@import "styles."+device+".css"
五、总结
1.Sass和less语法严谨,Stylus相对自由;
2.Sass和Stylus都具有类语言的逻辑方式处理:条件、循环等,而Less需要通过when等关键词来模拟这些功能,在这些方面less比不上Sass和Stylus;
3.Less 在丰富性以及特色上都不继Saas和Stylus,但boostrap引入了Less;