淺談stylus與sass的對比

all we konw , 這兩個都是css的預編譯工具，但雖然都是編譯工具，但還是存在差別的,下面來講講其中的區別

1、變量

 sass定義變量是以這種形式進行定義的$xxx:10;而stylus的定義方式更加接近

    

 stylus的定義方式跟javascript的表達方式一樣(對於寫js的人來說可能更為直觀)

 p.s   在sass里面，如果有全局變量， 局部變量都同名的話， 局部變量會覆蓋全局變量

 

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

$white :#fff

body{
    $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的話變量的作用域比較好，同一層級的同一個變量才會覆蓋，不同層級（如下面的代碼）不存在覆蓋的風險

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


---------------- 輸出 -----------------
body{
    color : #ccc
}
.nav{
    color : #fff
}

 

2、繼承，兩這的繼承方式以及結果都是一樣的，都是通過@extend .xxxx的方式進行繼承：

生成的代碼如下 ： 

　　p.s : 假設在上面未編譯的代碼中間有N行,其中某一行也對p的margin進行改動的話，編譯出來的p的樣式會以最后那次對p的改動為准（這個是我覺得不太好的地方，沒准那一天真有人加了那么一行，樣式就錯了）,但是在less里面就不是這樣子了，生成的結果是，在p ul ，ol的樣式里面包含這.block的樣式

    另外再說一點 ：sass不支持嵌套的繼承:

------------------------------- sass ----------------------
form
  button
    padding: 6px

a.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.

　　

Stylus中，只要選擇器匹配，就可以生效：

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

form
 input[type=text]
   padding: 5px
   border: 1px solid #eee
   color: #ddd

textarea
 @extends form input[type=text]
 padding: 10px

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

　　

生成：

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

　　

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

disable-padding-override = true
padding(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

想對而言， sass的語法更為簡介易懂一點,個人比較喜歡這點：

$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循環

這兩者的循環中取數的方式不一樣，sass用的是類似與模板的功能，而stylus里面基本上跟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循環里面直接就能取到循環上面的數值，這個稍微會直接點

后續還有很多不同的點，需要的話可以點擊下以下兩個連接來了解更多：

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 的人來說也是一種不錯的選擇。