A brief discussion on the comparison between stylus and sass_html/css_WEB-ITnose

all we know, these two are pre-compilation tools for CSS, but although they are both compilation tools, there are still differences. Let’s talk about the differences below

1. Variables

Sass defines variables in this form $xxx:10; while the definition of stylus is closer to

The definition of stylus is similar to javascript The expression is the same (it may be more intuitive for people who write js)

p.s In sass, if there are global variables and local variables have the same name , local variables will overwrite global variables

-------------  sass1 -----------------

$white :#fffbody{    $white : #ccc;    color : $white}.nav{    color : $white}------------ sass 1 ------------------

-------------  sass2 -----------------

$white :#fff//加上了！global 属性之后,上一行这个$white :#fff删掉也不会报错。 !global 在sass3.3及以后的版本才实现body{    $white : #ccc !global; //这样子写的话就算没有第一行的#fff 亦不会编译错误，因为!global 指定这个变量为全局变量了,    color : $white}.nav{    color : $white}------------ sass 2 ------------------

---------------- 输出 -----------------

body{ color : #ccc; } .nav{ color : #ccc; }

stylus If the scope of the variable is better, only the same variable at the same level will be overwritten. There is no risk of overwriting at different levels (such as the code below)

-------------  stylus -----------------white = #fffbody{    white = #ccc;    color : white}.nav{    color : white}---------------- 输出 -----------------body{    color : #ccc}.nav{    color : #fff}

2. Inheritance, the inheritance method and result of both are the same, both are inherited through @extend .xxxx:

generated The code is as follows:

　p.s: Assume that there are N lines in the middle of the uncompiled code above, and if one of the lines also changes the margin of p, it will be compiled. The style of p will be based on the last change to p (this is something I don’t think is very good. Maybe someone really added that line that day, and the style will be wrong), but it is not like this in less. , the generated result is that the style of p ul, ol contains the style of this .block

Another point: sass does not support nested inheritance:

------------------------------- sass ----------------------form  button    padding: 6pxa.button  @extend form button 

------------------------------- sass ----------------------

Syntax error: Can't extend form button: can't extend nested selectors // 解析错误： 无法继承自 button: 不能继承嵌套选择器 on line 6 of standard input Use --trace for backtrace.

　

In Stylus, as long as the selector matches, it will take effect:

------------------------------- stylus ----------------------

form input[type=text]   padding: 5px   border: 1px solid #eee   color: #dddtextarea @extends form input[type=text] padding: 10px

------------------------------- stylus ----------------------

　

Generate:

form input[type=text],form textarea {  padding: 5px;  border: 1px solid #eee;  color: #ddd;}textarea {  padding: 10px;}

　

3. Function

If you define a function in stylus, compare Simple vender(args...), vender(type=padding,n = 5px). To put it simply, just write a name and add a bracket and it is done. But it is very similar to javascript in that it can be used in the function body. It uses the arguments object, which neither Sass nor Less can provide.

In Sass, when defining a function, @mixins xxx($parent,$n) is generally used. The @mixins xxx{} parameter must start with $, and the only parameters that can be obtained in the function are functions The number of formal parameters will be ignored if it exceeds

4. Judgment statement:

The judgment statement of stylus is very similar to coffee-script Similarly, use unless

disable-padding-override = truepadding(args...)　　unless disable-padding-override is defined and disable-padding-override //第一种用法  　　padding(x, y)    　　margin y x

negative(n) //第二种用法  unless n is a 'unit' //unit是数字的意思    error('无效数值')  if n < 0    yes  else    no

body padding 5px 10px

I think the syntax of sass is more concise and easier to understand. I personally like this:

$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;  }}

5. for loop

The two loops have different ways of fetching numbers. Sass uses It is a function similar to templates, and stylus is basically the same as javascript

-------------------sass ------------------------@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; } //for循环里头需要通过#{$xxx}的方式取到for上面$i的值，这个写法虽然复杂，但是容易区分。}

--------------------- stylus ---------------body  fonts = Impact Arial sans-serif  for font, i in fonts    foo i font //for循环里面直接就能取到循环上面的数值，这个稍微会直接点

There are many different points in the follow-up, if necessary Click on the following two links to learn more:

http://www.w3cplus.com/sassguide/syntax.html

http://www.zhangxinxu.com/jq/ stylus/

To summarize the two:

The compilation of sass is closer to the native way of writing css, and the way of stylus is closer to coffee-script. Although the effect achieved is subtle. The difference depends on your personal situation;

Personally, I still like to use sass, because I am used to writing js, and I feel that the syntax of sass is more related to the techniques used in daily life (such as the #{$i of for loop }, such as $aaa : xxx) seems easier to use. Personally, I feel that stylus is a bit cumbersome to use, but it is also a good choice for people who have written coffee-scirpt.