saas(sccs)、less、stylus三者的区别

saas(sccs)、less、stylus三者的区别

在用css写样式的时候，我们可以发现css是存在着挺多的问题的，列举一二如下：
1、css语法不够强大，比如css的选择器无法进行嵌套，导致css中存在较多重复的选择器语句；
2、css无法定义变量以及没有合理的样式复用机制，导致整体css样式难以维护；
于是，css预处理器应运而生，目前较为常用的sass(scss)、stylus、less都是其中的佼佼者，我在项目中曾用过其中的scss和stylus,今天来总结一下它们的区别。

一、变量

1. Sass声明变量必须是$开头，后面紧跟变量名和变量值，而且变量名和变量值需要用冒号(:)分隔开；
2. Less声明变量用@开头，其余等同Sass;
3. 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;