all we konw , 这两个都是css的预编译工具,但虽然都是编译工具,但还是存在差别的,下面来讲讲其中的区别
1、变量
sass定义变量是以这种形式进行定义的$xxx:10;而stylus的定义方式更加接近
stylus的定义方式跟javascript的表达方式一样(对于写js的人来说可能更为直观)
p.s 在sass里面,如果有全局变量, 局部变量都同名的话, 局部变量会覆盖全局变量
1 | ------------- sass1 -----------------
|
Nach dem Login kopieren
1 | $white :#fffbody{ $white : #ccc; color : $white }.nav{ color : $white }------------ sass 1 ------------------
|
Nach dem Login kopieren
1 | ------------- sass2 -----------------
|
Nach dem Login kopieren
1 | ---------------- 输出 -----------------
|
Nach dem Login kopieren
1 | body{ color : #ccc; } .nav{ color : #ccc; }
|
Nach dem Login kopieren
stylus的话变量的作用域比较好,同一层级的同一个变量才会覆盖,不同层级(如下面的代码)不存在覆盖的风险
1 | ------------- stylus -----------------white = #fffbody{ white = #ccc; color : white}.nav{ color : white}---------------- 输出 -----------------body{ color : #ccc}.nav{ color : #fff}
|
Nach dem Login kopieren
2、继承,两这的继承方式以及结果都是一样的,都是通过@extend .xxxx的方式进行继承:
生成的代码如下 :
p.s : 假设在上面未编译的代码中间有N行,其中某一行也对p的margin进行改动的话,编译出来的p的样式会以最后那次对p的改动为准(这个是我觉得不太好的地方,没准那一天真有人加了那么一行,样式就错了),但是在less里面就不是这样子了,生成的结果是,在p ul ,ol的样式里面包含这.block的样式
另外再说一点 :sass不支持嵌套的继承:
1 | ------------------------------- sass ----------------------form button padding: 6pxa.button @extend form button
|
Nach dem Login kopieren
1 | ------------------------------- sass ----------------------
|
Nach dem Login kopieren
1 | Syntax error: Can 't extend form button: can' t extend nested selectors
|
Nach dem Login kopieren
Stylus中,只要选择器匹配,就可以生效:
1 | ------------------------------- stylus ----------------------
|
Nach dem Login kopieren
Nach dem Login kopieren
1 | form input[type=text] padding: 5px border: 1px solid #eee color: #dddtextarea @ extends form input[type=text] padding: 10px
|
Nach dem Login kopieren
1 | ------------------------------- stylus ----------------------
|
Nach dem Login kopieren
Nach dem Login kopieren
生成:
1 | form input[type=text],form textarea { padding: 5px; border: 1px solid #eee; color: #ddd;}textarea { padding: 10px;}
|
Nach dem Login kopieren
3、函数
在stylus里面 定义一个函数的话比较简单vender(args...) , vender(type=padding,n = 5px) 简单来说就是随便写个名字然后加一个括号就完事了,但它有一点跟javascript很类似,就是可以在这个函数体里面使用arguments对象,这个是sass,less都无法提供的。
在sass里面,定义函数的话一般都用@mixins xxx($parent,$n) ,@mixins xxx{}参数必须是以$开头才可以,而且函数里面能取到的参数只有函数形参数上的个数,超过的就忽略了
4、判断语句 :
stylus的判断语句跟coffee-script很类似,用到unless
1 | disable-padding-override = truepadding(args...) unless disable-padding-override is defined and disable-padding-override
|
Nach dem Login kopieren
想对而言, sass的语法更为简介易懂一点,个人比较喜欢这点:
1 | $lte7 : true; $type : monster;.ib{ display:inline-block; @ if $lte7 { *display:inline; *zoom:1; }}p { @ if $type == ocean { color: blue; } @ else if $type == matador { color: red; } @ else if $type == monster { color: green; } @ else { color: black; }}
|
Nach dem Login kopieren
5、for循环
这两者的循环中取数的方式不一样,sass用的是类似与模板的功能,而stylus里面基本上跟javascript一致
1 | -------------------sass ------------------------@ for $i from 1 through 3 { .item-#{ $i } { width: 2em * $i ; }
|
Nach dem Login kopieren
1 | --------------------- stylus ---------------body fonts = Impact Arial sans-serif for font, i in fonts foo i font
|
Nach dem Login kopieren
后续还有很多不同的点,需要的话可以点击下以下两个连接来了解更多:
http://www.w3cplus.com/sassguide/syntax.html
http://www.zhangxinxu.com/jq/stylus/
总结下两者:
sass的编译更接近与css的原生的方式来写,stylus的方式比较接近coffee-script , 实现出来的效果虽然也有细微的差异,看个人情况使用吧;
我自己的话还是喜欢用sass,因为写习惯了js,觉得sass的语法跟平常日常使用的技术都比较相关(比如for循环的#{$i},比如$aaa : xxx) 看起来更容易上手。个人感觉stylus用法上有点累赘,不过对与写过coffee-scirpt 的人来说也是一种不错的选择。