對比學習sass和stylus的經常使用功能

在衆多的css預處理器語言中，sass和stylus算是十分優秀的兩個。本文主要針對二者的經常使用功能作個簡單的對比分析。在對比中瞭解兩者的差別，同時幫助你們更好的掌握這兩種預處理語言。
本文涉及到的sass部分，均來自於阮一峯老師的SASS用法指南
。同時不會對sass和stylus的具體用法作十分細緻的介紹，感興趣的同窗可參考以下資料進行系統的學習。

• sass中文官網

• sass用法指南

• stylus官網

• stylus中文文檔

---

下面就對兩者的經常使用功能作一個簡單的對比

---

一、安裝

sass時基於Ruby語言寫的，因此安裝sass以前，須要先安裝Ruby。假設你已經安裝了Ruby，在命令行直接運行。

gem install sass

安裝成功以後，就可使用了。

stylus是nodejs的一個模塊，安裝以前，請確保安裝了nodejs。而後直接在命令行中運行。

npm install stylus

而後，npm就會爲你下載最新包到當前目錄的node_modules目錄中

二、使用

sass就是普通的文本文件，裏面能夠是css語法，根據後綴名的不一樣(sass的後綴名能夠是.sass或.scss)書寫格式不一樣，具體的sass語法見阮一峯老師的文章。

stylus也是普通的文本文件,裏面也能夠是css語法，stylus文件的後綴名通常是.styl。

二者都提供了基本的命令行語法，因此咱們能夠直接在命令行中使用命令對sass文件或者style文件進行編譯。但相對來講stylus的命令行操做更爲強大。

下面的命令能夠直接在屏幕上顯示.scss文件轉化後的css代碼(假設文件的名稱就是test)

sass test.scss

對應的stylus的操做就是:

stylus test.styl

可是stylus的編譯結果不會再屏幕上輸出，而是生成同名的css文件。

若是要將顯示結果保存成文件，sass須要在後面再跟一個.css文件名。

sass test.scss test.css

stylus則直接以下，就生成了一個同名的文件。

stylus test.styl

sass提供了四種編譯風格:

1. nested：嵌套縮進的css代碼，它是默認值。

2. expanded：沒有縮進的、擴展的css代碼。

3. compact：簡潔格式的css代碼。

4. compressed：壓縮後的css代碼。

sass的編譯選項的使用,須要使用--style來指定:

sass --style compressed test.sass test.css

style提供了--compress來壓縮編譯結果:

stylus --compress test.styl

sass能夠監聽某個文件或者目錄，一旦源文件改變，就自動生成編譯後的版本。

// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

stylus也是經過--watch的選項來監聽源文件的變更,改變和自動編譯。

stylus --watch test.styl

除此，stylus的命令行工具還提供了一些其它基本的功能:

1. repl環境
在命令行中直接輸入stylus就獲得了stylus的repl環境，咱們能夠直接在命令行中書寫stylus的內容:

body
      color: red

而後按下ctrl+d鍵，就直接在命令行中輸出編譯結果。

2. stylus能夠直接將css編譯成stylus格式

stylus --css test.css

三、變量

sass容許使用變量，全部的變量以$開頭。

$blue: #1875e7;
div {
   color: $blue
 }

stylus也容許使用變量，變量名的$是可選的，變量值能夠是表達式。

color = blue 或者  $color = blue
div
    color: color

若是變量須要鑲嵌在字符串中，sass須要寫在#{}之中。

$side: left;
.rounded {
    border-#{$side}-radius: 5px;
}

stylus則須要使用{}

side = 5px
.roundeed 
    border-{side}-radius: 5px

四、計算功能

sass容許在代碼中使用算式:

body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

stylus一樣也支持在代碼中使用算式:

body
    margin: (14px/2)
    top: 50px + 100px
    right: var * 10%

注意%也是stylus的一個運算符，因此上面的right實際的計算結果是var * 10 % === var * 10。

stylus的運算十分強大，給予了css的編程能力。有興趣的同窗能夠張鑫旭大神翻譯的stylus文檔。

除此，stylus有一個更爲強大的地方就是，stylus能夠直接進行屬性查找，使用@符號查找屬性。如一個常見的垂直居中的例子:

div
    width: 100px
    height: 100px
    position: absolute
    top: 50%
    left: 50%
    margin-left: -(@width / 2)
    margin-top: -(@width / 2)

五、嵌套

sass容許選擇器嵌套。好比下面的css代碼:

div h1 {
    color: red
  }

能夠寫成：

div {
    h1{
      color: red
   }
 }

stylus一樣支持選擇器嵌套，上面的代碼能夠寫成:

div
  h1
    color: red

sass也支持屬性嵌套,好比border-color屬性能夠寫成:

p{
     border: {
       color: red;
     }
 }

border後面須要添加冒號。

stylus對這個功能沒有提供支持

在嵌套的代碼塊內，二者均可以經過&引用父元素。好比a:hover僞類，能夠寫成:

a{
     &:hover {
         color: #ffb3ff
     }
}

a
 &:hover
   color: #ffb3ff

六、註釋

sass提供了三種風格的註釋:

• 標準的css註釋 /* comment */，會保留到編譯後的文件中。

• 單行註釋 // comment，只保留在sass源文件中。編譯後省略。

• 在/*! 後面加一個感嘆號，表示這是"重要註釋"。即便是壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息。

/*! 重要註釋 */

stylus也提供了上述三種註釋:

• // 單行註釋，css不輸出

• /* 多行註釋只在compress選項未啓用的時候輸出到編譯後的文件中 */

• /*! 多行註釋，任何狀況都輸出到編譯後的文件中 */

七、繼承

sass容許一個選擇器，繼承另外一個選擇器。好比，如今class1：

.class1 {
    border: 1px solid #ddd
  }

class2要繼承class1，就要使用@extend命令。

.class2 {
    @extend .class1
    font-size: 120%
  }

stylus的繼承方式和sass基本一致，但有一些稍微的不一樣。

stylus實現繼承:

.class1
    border: 1px solid #ddd

class2繼承class1

.class2
    @extend .class1
    font-size: 120%

二者的區別主要在於--sass不容許@extend嵌套選擇器:
以下面的樣式:

div
  h1
   color: red

在sass中，若是按照下面這樣寫就會直接編譯錯誤。

.div2 {
    @extend div h1
 }

而在stylus中卻能夠成功編譯，由於stylus中，只要選擇器匹配，繼承就會生效。

.div2
   @extend div h1

八、Mixin

sass使用@mixin命令，定義一個代碼塊。

@mixin left {
    float: left;
    margin-left: 10px;
  }

使用@include命令，調用這個mixin。

div{
   @include left;
 }

stylus中的mixin和其函數的書寫形式是同樣的。可是應用卻很大的不一樣！書寫形式以下:

left()
  float: left
  margin-left: 10px

調用的時候直接經過名稱調用:

div
  left()

sass中的mixin能夠傳遞參數，同時還能夠爲參數提供默認值。以下面是一個mixin實例，用來生成瀏覽器的前綴。

@mixin rounded($vert, $horz, $radius: 10px){
  　border-#{$vert}-#{$horz}-radius: $radius;
　　-moz-border-radius-#{$vert}-#{$horz}: $radius;
　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

使用的時候能夠像下面這樣調用:

#navbar li {@include rounded(top, left)}

stylus也容許給mixin提供參數並提供默認值，因此上面的形式在stylus中的書寫是這樣的：

rounded(vert, horz, radius = 10px)
     border-{vert}-{horz}-radius: radius
     -moz-border-radius-{vert}{horz}: radius;
　　　-webkit-border-{vert}-{horz}-radius: radius;

按照以下方式使用：

#navbar
   li  
    rounded(top, left)

除此，stylus的mixin還提供了一些其餘的很強大的功能:

一、arguments變量
這個變量更合理的解釋是定義的mixin看成函數調用的時候(兩者的定義是相同的)存在的局部變量。咱們能夠這樣使用:

radius()
   border-radius: arguments

調用：

div
  radius(5px 10px/5px 5px)

二、父級引用
咱們一樣能夠在stylus的mixin中使用父級引用操做符:&

hover()
   a
     &:hover
        color: red

九、顏色函數

sass提供了一些內置的顏色函數，以便生成系列顏色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

在stylus中也提供了內置的顏色函數，使用也十分簡單。如：

red(#c00) //返回顏色的r色值
image-size(path) //獲取指定path圖片的width和height

更多的方法，請參考stylus內置方法

十、插入文件

sass的@import命令，用於插入外部的文件。

@import "path/filename.scss";

若是是css文件，則等同於css的import命令。

@import "foo.css";

stylus也提供了@import命令用於插入外部的文件，和sass的用法基本一致，以下:

@import "reset.css"
@import "reset.styl"

除了@import命令，stylus也提供了其餘的幾個比較實用的命令。

一、@media
工做原理和css中常規的媒體查詢同樣，實用stylus的書寫形式:

@media print
    #header
     #footer
       display: none

二、@font-face
用法和常規css用法一致，一樣使用stylus的格式書寫:

@font-face
  font-family Geo
  font-style normal
  src url(fonts/geo_sans_light/GensansLight.ttf)

三、@keyframes
寫法和常規的css一致，但會默認編譯成@-webkit-keyframes，即:

@keyframes
   0%
     color: red
   100%
     color: green

會變編譯成:

@-webkit-keyframes{
   0%{
       color: red
   }
   100%{
       color: green
   }
 }

咱們能夠全局指定vendors變量進行標準解析:

vendors = official
@keyframes
    0%
      color: red
    100%
      color: green

會編譯成:

@keyframes{
   0%{
       color: red
   }
   100%{
       color: green
   }
 }

十一、條件語句

sass中使用@if能夠用來作判斷，以下：

p {
     @if 1 + 1 == 2 {border: 1px solid;}
     @if 5 < 3 {border: 2px dotted;}
 }

stylus中能夠直接使用if關鍵字，級上面的寫法在stylus中的書寫方式以下：

p
     if 1 + 1 == 2
       border: 1px solid
     if 5 < 3
       border: 2px dotted

sass中也提供了@else關鍵字和@if搭配:

@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

stylus則能夠直接在if語句後面跟上else語句:

if red(color) > 50 {
  
 } else {
  
 }

除此，stylus也提供了unless關鍵字，同時支持條件後置語法，具體參考stylus條件

十二、循環語句

sass支持for循環:

@for $i from 1 to 10 {
　.border-#{$i} {
　　　border: #{$i}px solid blue;
  }
}

也支持while循環:

$i: 6;
 @while $i > 0 {
　.item-#{$i} { width: 2em   $i; }
 　$i: $i - 2;
}

也可使用@each命令進行循環:

@each $member in a, b, c, d {
　.#{$member} {
  　　background-image: url("/image/#{$member}.jpg");
　　}
}

stylus只提供了一個for/in進行循環:

for i in 1 2 3 4 5 6 7 8 9
  .border-{i}
      border: solid blue unit(i, 'px')

1三、自定義函數

sass容許用戶編寫本身的函數:

@function double($n) {
　　@return $n * 2;
}
#sidebar {
　　width: double(5px);
}

stylus也容許用戶編寫本身的函數，函數的定義方式和mixin定義方式同樣：

double(n)
    n * 2
#sidebar
   width: double(5px)

除了能夠給函數賦予默認參數以外，stylus的函數是容許返回多個值的：

width()
   20px 10px
 
width()[0] // 20px

以上就是對sass和sylus經常使用功能的簡單介紹，在對比中學習，相信讀者會很快了解二者之間差別。你們只要掌握了以上提到的兩者的經常使用功能，就能使用這兩種預處理器應對平常的開發了。但這還有不少功能這裏沒有提到，尤爲是stylus做爲nodejs的一個模塊，提供了強大的javascript編程的能力，想了解更多內容的同窗能夠經過以上提供的連接進行學習。