less，sass，stylus配置和應用教程及三者比較

龍恩0707發表於2014-09-06

less，sass，stylus配置和應用教程及三者比較

 Less

   1. 定義：

      Less是CSS預處理語言，在css基礎之上增加了諸如變數，混合(mix)，繼承，運算，函式等功能，LESS既可以執行在客戶端(支援IE10+，firefox，Webkit)，也可以藉助於Node.js在伺服器端執行(支援IE6+，firefox，Webkit)。

      什麼是CSS預處理技術？CSS預處理技術，是指用一種新語言用來為CSS 增加可程式設計的的特性，無需考慮瀏覽器的相容性問題。你可以在 CSS 中使用變數、簡單的程式邏輯、函式等等在程式語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，適應性更強。支援多樣性的CSS語法.

    2. 配置教程(如何使用)。

       1.客戶端使用Less檔案：

        客戶端使用less檔案很簡單，只需要引用less.js即可(下面是線上cdn的less.js)：如下在頁面上這樣引用。

      <link rel="stylesheet/less" type="text/css" href="styles.less" />

     <script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

     注意： 上面的less檔案 是我們自己寫的less樣式檔案，且一定要放在less.js之前，這樣才可以正確的被解析成正常的css樣式。且經過測試使用客戶端這樣引用在IE6-9並不生效，也就是說並沒有和網上說的一樣能正確被解析css樣式，所以我們不建議用客戶端這樣引用。

   下面我們先來看看Less的變數，混合，繼承，運算，函式等功能的demo。

    1.    變數：

         變數允許我們單獨定於一系列通用的樣式，然後在需要的時候去呼叫他。如下程式碼：

// LESS
@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}

在瀏覽器預覽，他會被正確的解析成如下css樣式：

/* 生成的 CSS */
#header {
color: #4D926F;
}
h2 {
 color: #4D926F;
}

也就是說我們可以用javascript語言來這樣理解，@color可以作為一個全域性變數，然後在各個函式裡面我們想使用它，可以直接呼叫它。

  2.混合：

       混合可以將一個已定義好的classA輕鬆引入到classB中，從而簡單的實現classB繼承與classA中的所有屬性。我們也可以帶引數地呼叫，就像使用函式一樣。如下程式碼:

// LESS
.rounded-corners (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}
#header {
 .rounded-corners;
}
#footer{
 .rounded-corners(10px);
}

在css中會被解析成如下程式碼

/* 生成的 CSS */
#header {
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}
#footer {
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

    3.巢狀規則：

         我們可以在一個選擇器中巢狀另一個選擇器來實現繼承，這樣很大程度上減少了程式碼量，並且程式碼看起來更加清晰。如下程式碼演示被解析成css後的樣式：

// LESS
#header {
 h1 {
    font-size: 26px;
    font-weight: bold;
 }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
   }
 }
}

被生成css檔案如下樣式：

/* 生成的 CSS */
#header h1 {
 font-size: 26px;
 font-weight: bold;
}
#header p {
 font-size: 12px;
}
#header p a {
 text-decoration: none;
}
#header p a:hover {
 border-width: 1px;
}

    4. 函式 & 運算

           運算提供了加，減，乘，除操作，我們可以做屬性值和顏色值得運算，這樣就可以實現屬性值之間的複雜關係。如下程式碼：

// LESS
@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer { 
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}

被生成後的CSS程式碼如下：

/* 生成的 CSS */
#header {
 color: #333;
 border-left: 1px;
 border-right: 2px;
}
#footer { 
 color: #114411;
 border-color: #7d2717;
}

等等操作，我這邊不一一列舉。

注意：  1. 客戶端這樣引用less.js檔案來解析style.less成真正的樣式，在真正的專案中儘量不要這樣使用，因為less.js壓縮後的程式碼也有100KB，對於效能方面有一定的影響，且通過測試IE6-IE9並不支援。如果要使用less的話，我們建議最好使用node.js或其他第三方工具進行預編譯。接下來我們會談談如何用nodejs來進行編譯less檔案。

            2.在做demo時候，我們要預覽效果要使用本地伺服器環境下預覽效果，不能直接在本地開啟頁面，否則這樣會報錯！如下：

 2.伺服器端使用nodeJS來對Less檔案進行編譯。

          原理：進入專案中使用nodeJS對比如index.less 編譯成index.css樣式檔案，我們在頁面上直接引用index.css即可，其他的比如上面介紹客戶端less.js都不需要。

       步驟如下：

          1. 確保本機已安裝node及NPM(node包管理器)，然後在終端命令下執行命令如下：

           npm install less

           如果你想下載最新文件版本的Less的話，可以嘗試下面的操作：

           npm install less@latest

           演示如下：

             2.假如專案中的目錄如下：

其中index.less檔案程式碼如下：

 

進入根目錄中css檔案下，使用如下命令：

lessc index.less > index.css  (也可以把這句程式碼寫到批處理bat裡面，直接執行下即可)。

即可把index.less 編譯成新的檔案index.css，我們可以看看index.css檔案程式碼如下：

 

我們現在再來看看根目錄檔案就多了一個index.css檔案，如下：

 

其中test.bat是批處理檔案 我們不管。

想更多的瞭解Less的話，可以看如下教程。

http://www.bootcss.com/p/lesscss/

http://less.bootcss.com/

在chrome瀏覽器下如何調式?

     Less和sass一樣，除錯需要開啟編譯(koala)時輸出除錯資訊和瀏覽器除錯功能，兩者缺一不可。

     Less在chrome下如何設定,和sass一樣的。

    koala開啟

         koala是一個前端前處理器語言圖形編譯工具，支援Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺執行，完美相容windows、linux、mac。 需要選下載安裝，下載網址如下：

       詳情瞭解網址：http://koala-app.com/index-zh.html

       開啟瀏覽器除錯

       谷歌瀏覽器除錯

          F12開啟除錯皮膚，點選除錯皮膚右上角的齒輪圖示開啟設定，在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS。

f12開啟除錯皮膚，就可以看到原先右邊的css檔案變成了我們現在的less檔案.如下圖

點選less檔案，會跳到source裡面的less原始檔，現在可以在裡面進行修改，修改完成後可以右鍵選擇save或save as命令，然後替換我們本地的less原始檔，重新整理chrome就可以看到變化（注意，解析樣式需要一定時間）。以後只要ctrl+s儲存修改就可以在瀏覽器中看到修改效果了。

注意事項：切記專案檔名不能叫less資料夾，否則的話 編譯不會生成map檔案，也就是說無法定位到單獨的less檔案了。如下：

 Sass

    1. 定義：

        Sass也是一種css預處理語言，語法也和Less類似，所以也不多說。

    2. 配置教程(如何使用)。

        Sass安裝：

         因為Sass依賴於ruby環境，所以裝sass之前要先安裝ruby，先到官網下載個ruby，地址：http://rubyinstaller.org/downloads 我下載的是Ruby 2.0.0-p481 (x64)

        Ruby安裝：

           在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，新增環境變數，不然以後使用編譯軟體的時候會提示找不到ruby環境。如下：

    Sass安裝：

        安裝完ruby後，在開始選單中，找到剛才我們安裝的ruby，開啟Start Command Prompt with Ruby。如下：

然後直接在命令列中輸入如下命令：

gem install sass

最近因為牆的比較厲害，如果你沒有安裝成功，那麼請參考下面的淘寶的RubyGems映象安裝sass，如果成功則忽略。

  淘寶的RubyGems映象安裝sass安裝方法：

      由於國內網路原因（你懂的），導致 rubygems.org 存放在 Amazon S3 上面的資原始檔間歇性連線失敗。這時候我們可以通過gem sources命令來配置源，先移除預設的https://rubygems.org源，

然後新增淘寶的源https://ruby.taobao.org/，然後檢視下當前使用的源是哪個，如果是淘寶的，則表示可以輸入sass安裝命令gem install sass了。

出現如下資訊，表示安裝成功了！

下面我們可以檢視下Sass版本的命令如下：

你也可以執行幫助命令列來檢視你需要的命令

 

Sass基本語法介紹：

   1.   檔案字尾名

         sass有兩種字尾名檔案：一種字尾名為sass，不使用大括號和分號；另一種就是我們這裡使用的scss檔案，這種和我們平時寫的css檔案格式差不多，使用大括號和分號。而本教程中所說的所有sass檔案都指字尾名為scss的檔案。在此也建議使用字尾名為scss的檔案，以避免sass字尾名的嚴格格式要求報錯。如下圖：

 

    2.   變數

        sass的變數必須是$開頭，後面緊跟變數名，而變數值和變數名之間就需要使用冒號(:)分隔開（就像CSS屬性設定一樣），如果值後面加上!default則表示預設值。

      普通變數

      定義之後可以在全域性範圍內使用。如下圖所示：

  3.  巢狀

      sass可以進行選擇器的巢狀，表示層級關係。

如下圖所示：

 

會被編譯成如下樣式：

     4．匯入

         sass的匯入(@import)規則和CSS的有所不同，編譯時會將@import的scss檔案合併進來只生成一個CSS檔案。但是如果你在sass檔案中匯入css檔案如@import 'reset.css'，那效果跟普通CSS匯入樣式檔案一樣，匯入的css檔案不會合併到編譯後的檔案中，而是以@import方式存在。

          所有的sass匯入檔案都可以忽略字尾名.scss。一般來說基礎的檔案命名方法以_開頭，如_mixin.scss。這種檔案在匯入的時候可以不寫下劃線，可寫成@import "mixin"。

      如下圖演示，其中reset.css是要被匯入的檔案。

      Reset.css

生成後的css檔案如下：

     5.mixin

        sass中使用@mixin宣告混合，可以傳遞引數，引數名以$符號開始，多個引數以逗號分開，也可以給引數設定預設值。宣告的@mixin通過@include來呼叫。

        如下：

生成後檔案

    6. 擴充套件/繼承

          sass中，選擇器繼承可以讓選擇器繼承另一個選擇器的所有樣式，並聯合宣告。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟需要繼承的選擇器。

    7．運算

         sass具有運算的特性，可以對數值型的Value(如：數字、顏色、變數等)進行加減乘除四則運算。請注意運算子前後請留一個空格，不然會出錯。

   如下：

等等語法，這裡列出一些簡單的語法，如果想需要更多的學習Sass的話，可以請看Sass教程。地址： http://www.w3cplus.com/sassguide/

   Sass如何編譯

      1.  單檔案轉換命令。

          sass sass.scss sass.css

       比如我專案結構如下：

我們先來看看a.scss檔案

body {

    background: #eee;

}

     Reset.css 檔案css如下：

       div {color:red;}

     sass.scss 檔案程式碼如下：

     @import "reset.css";

     @import "a";

      p{color:red;}

   我執行test.bat處理命令如下：sass sass.scss sass.css

   即可生成sass.css新檔案，如下：

其中sass.css檔案程式碼如下：

@import url(reset.css);

body {

  background: #eee;

}

p {

  color: red;

}

2. 對整個目錄進行編譯成css檔案。

  1. 首先需要安裝rb-fsevent （更多學習https://github.com/thibaudgg/rb-fsevent/ ）安裝命令如下：

如上 說明已經安裝完成。

接著我對上面sass專案下的sass檔案進行編譯成css檔案，比如對上面Sass專案中的css資料夾下面的所有sass檔案轉換成css檔案，如下圖所示：

上面的意思是：對sass專案下的css檔案所有的Sass檔案 編譯成css檔案。最後編譯如下目錄結構，如下圖：

更多的編譯介紹 請看下面網址：

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

Sass調式

    sass除錯需要開啟編譯(koala)時輸出除錯資訊和瀏覽器除錯功能，兩者缺一不可。

開啟編譯除錯資訊

     目前sass的除錯分為兩種，一種為開啟debug-info，一種為開啟sourcemap（這個將成為主流）。

如開啟的是debug-info，則解析的css檔案中會有以@media -sass-debug-info開頭的程式碼，如沒有則表明沒有開啟。

如開啟的是sourcemap，則在解析的css檔案同目錄下生成一個.css.map的字尾名檔案。

命令列開啟

    兩個的命令分別為--debug-info，--sourcemap，開啟如下：

和

   koala開啟

       koala是一個前端前處理器語言圖形編譯工具，支援Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺執行，完美相容windows、linux、mac。 需要選下載安裝，下載網址如下：

詳情瞭解網址：http://koala-app.com/index-zh.html

       如下圖：點選相應的檔案，然後就會出現右邊的編譯選項，即可選擇是否開啟source map，debug info

    開啟瀏覽器除錯

    谷歌瀏覽器除錯

         F12開啟除錯皮膚，點選除錯皮膚右上角的齒輪圖示開啟設定，在general選項中勾選Enable CSS source map 和 Auto-reload generated CSS。

開啟--sourcemap編譯，f12開啟除錯皮膚，就可以看到原先右邊的css檔案變成了我們現在的scss檔案.

點選scss檔案，會跳到source裡面的scss原始檔，現在可以在裡面進行修改，修改完成後可以右鍵選擇save或save as命令，然後替換我們本地的scss原始檔，重新整理chrome就可以看到變化（注意，解析樣式需要一定時間）。以後只要ctrl+s儲存修改就可以在瀏覽器中看到修改效果了。

Stylus

     1.定義：

          Stylus也是一門css預處理語言，可以建立健壯的，動態的，富有表現力的css. 預設使用 .styl 的作為副檔名，支援多樣性的CSS語法。

    2.配置教程(如何使用)。

          Stylus也是基於nodejs的，如果沒有安裝nodejs，請先安裝nodejs，可以到這個網址裡面下載（http://nodejs.org/#download ），安裝完後node自帶了NPM(node包管理器)。

       然後，在終端命令下安裝stylus包，如下程式碼：npm install stylus

如上，說明已經安裝成功了！

Stylus基本語法介紹：

   一: 變數

         我們可以指定表示式為變數，然後在我們的樣式中貫穿使用：我們這樣如下寫：

第一種寫法：
font-size = 14px
body
  font font-size Arial, sans-seri
編譯成為如下這樣：
body {
  font: 14px Arial, sans-serif;
}
第二種寫法：
變數可以組成一個表示式列表 如下
font-size = 14px
font = font-size "Lucida Grande", Arial
body
  font font sans-serif
編譯成為如下這樣：
body {
  font: 14px "Lucida Grande", Arial sans-serif;
}
標示符(變數名，函式等)，也可能包括$字元，如下：
$font-size = 14px
body {
  font: $font-size sans-serif;
}

    二：mixin(混入)

          例如，下面有定義的border-radius(n)方法，其卻作為一個mixin（如，作為狀態呼叫，而非表示式）呼叫。

當border-radius()選擇器中呼叫時候，屬性會被擴充套件並複製在選擇器中。

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius(5px)
會編譯成如下程式碼：
form input[type=button] {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
使用混合書寫，你可以完全忽略括號。
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form input[type=button]
  border-radius 5px
也可以編譯成上面的一樣。

還可以這樣寫：
/*宣告一個Mixin叫作“error”*/
error(borderWidth=2px){
  border:borderWidth solid #f00;
  color: #f00;
}
/*呼叫error Mixins*/
.generic-error {
  error();/*直接呼叫error mixins*/
}
.login-error {
  error(5px);/*呼叫error mixins，並將引數$borderWidth的值重定義為5px*/
}
會編譯成如下程式碼：
/*宣告一個Mixin叫作“error”*/
.generic-error {
  border: 2px solid #f00;
  color: #f00; /*直接呼叫error mixins*/
}
.login-error {
  border: 5px solid #f00;
  color: #f00; /*呼叫error mixins，並將引數$borderWidth的值重定義為5px*/
}

     三：巢狀

          CSS前處理器語言中的巢狀指的是在一個選擇器中巢狀另一個選擇器來實現繼承，從而減少程式碼量，並且增加了程式碼的可讀性。比如說，我們在CSS中多個元素有一個相同的父元素，那麼寫樣式會變得很乏味，我們需要一遍一遍的在每個元素前寫這個父元素，除非給特定的元素新增類名“class”或者ID。

如下程式碼：

section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}
會編譯成如下程式碼：
section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982c1;
}
section nav a:hover {
  text-decoration: underline;
}

   4. 繼承

       Stylus的繼承是把一個選擇器的所有樣式繼承到另個選擇器上。在繼承另個選擇器的樣式時需要使用“@extend”開始，後面緊跟被繼承的選擇器：

如下程式碼：

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .block;/*繼承.block選擇器下所有樣式*/
  border: 1px solid #eee;
}
ul,ol {
  @extend .block; /*繼承.block選擇器下所有樣式*/
  color: #333;
  text-transform: uppercase;
}
他們會編譯成如下程式碼：
.block,
p,
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
}
p { /*繼承.block選擇器下所有樣式*/
  border: 1px solid #eee;
}
ul,
ol { /*繼承.block選擇器下所有樣式*/
  color: #333;
  text-transform: uppercase;
}

     5. 方法(function)

         Stylus強大之處就在於其內建的語言函式定義。其定義與混入(mixins)一致；卻可以返回值。

         返回值

        很簡單的例子，兩數值相加的方法.

add(a, b)
      a + b
    body 
      padding add(10px, 5)
    會編譯成如下程式碼：
    body {
              padding: 15px;
    }
變數函式
我們可以把函式當作變數傳遞到新的函式中。例如，invoke()接受函式作為引數，因此，我們可以傳遞add()
如下程式碼：
invoke(a, b, fn)
  fn(a, b)
add(a, b)
  a + b
body
  padding invoke(5px, 10, add)
會編譯成如下程式碼：
body {
  padding: 15px;
}
引數：
arguments是所有函式體都有的區域性變數，包含傳遞的所有引數。
比如如下程式碼
sum()
  n = 0
  for num in arguments
    n = n + num
body
  padding sum(1px,2,3,4,5,6)
會編譯成如下程式碼：
body {
  padding: 21px;
}

     6. 匯入(important)

         在CSS中，並不喜歡用@import來匯入樣式，因為這樣的做法會增加http的請求。但是在CSS前處理器中的匯入(@import)規則和CSS的有所不同，它只是在語義上匯入不同的檔案，但最終結果是生成一個CSS檔案。如果你是通赤“@import ‘file.css’”匯入“file.css”樣式檔案，那效果跟普通CSS匯入樣式檔案一樣。注意：匯入檔案中定義了變數、混合等資訊也將會被引入到主樣式檔案中，因此需要避免他們的相互衝突。

Sass Less及Stylus對於匯入都是一樣的，這裡就不列舉列子哦，具體的可以看Sass或者Less了。

對於Stylus還有更多高階語法：如果想要繼續瞭解更多的話，可以看如下文章：

中文版的張鑫旭翻譯的 http://www.zhangxinxu.com/jq/stylus/functions.php

英文原版的 http://learnboost.github.io/stylus/

對於styl檔案如何編譯？

比如專案目錄結構如下：

編譯檔案有如下幾種方式：

        1.     如果我們想編譯單個檔案，比如下編譯css2下的test.styl的話，我們可以做如下操作，首先進入專案中css2資料夾裡面，然後輸入如下語句：stylus <test.styl> test.css

Ok後在目錄下會生成一個test.css檔案了 如下

 

其中test.styl 程式碼如下：

font-size = 14px

body font font-size Arial, sans-seri

編譯成如下程式碼：

body { font: 14px Arial, sans-seri;}

      2.     如果我們想一起編譯2個檔案或者多個檔案要如何編譯呢？

             我們可以這樣編譯：stylus test.styl test2.styl …

       3.     我們也可以對一整個資料夾進行編譯。比如資料夾為css2，我想對css2下的所有styl檔案進行編譯：如下程式碼：

               stylus css2

       4.     如果編譯完成後，我們需要對css壓縮的話，我們可以執行如下程式碼：

               stylus --compress <test.styl> test.css

               就可以對test.css壓縮了。

                                                            Less Sass Stylus三者比較

     一：變數

     Less 的變數名使用 @ 符號開始：如下程式碼：

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @mainColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}

    Sass 的變數必須是 $ 開始，然後變數名和值使用冒號隔開，跟 CSS 的屬性一致：$mainColor: #0982c1;

$siteWidth: 1024px;
$borderStyle: dotted;
body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

    Stylus 對變數名沒有任何限定，你可以是 $ 開始，也可以是任意的字元，而且與變數值之間可以用冒號、空格隔開，需要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變數，但其對應的值並不會賦予該變數，換句話說，在 Stylus 的變數名不要用 @ 開頭。如下程式碼：       

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
Body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth

上面的三種不同的 CSS 前處理器的寫法，最終都將產生相同的結果：

body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
}

    二：巢狀

     如果我們需要在CSS中相同的 parent 引用多個元素，這將是非常乏味的，你需要一遍又一遍地寫 parent。Less Sass Stylus三者一樣的語法。例如：

section {
  margin: 10px;
  nav {
    height: 25px;
    a {
        color: #0982C1;
        &amp;:hover {
        text-decoration: underline;

      }
    }
  }
}

最終都生成css程式碼如下：

section {
  margin: 10px;
}

section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;

}

     三：Mixins(混入)

      Less CSS 的混入語法：

.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  .error();

}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px);

}

Sass 的混入語法：

@mixin error($borderWidth: 2px) {

  border: $borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  @ include error();
}

.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @ include error(5px);
}

Stylus 的混入語法：

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}

.generic-error {
  padding: 20px;
  margin: 4px;
  error();

}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px);

}

最終它們都將編譯成如下的 CSS 樣式：

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

    四：繼承

       當我們需要為多個元素定義相同樣式的時候，我們可以考慮使用繼承的做法。例如我們經常需要：

在 Sass 和 Stylus 我們可以這樣寫：

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  @extend .block;
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block;
  color: #333;
  text-transform: uppercase;
}

最終編譯成如下程式碼：

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;

}

p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}

在這方面 Less 表現的稍微弱一些，更像是混入寫法：

.block {
  margin: 10px 5px;
  padding: 2px;
} 
p {
  .block;
  border: 1px solid #EEE;
}
ul, ol {
  .block;
  color: #333;
  text-transform: uppercase;
}

最終被編譯成如下程式碼：

.block {
  margin: 10px 5px;
  padding: 2px;
}

p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

      五：匯入

             很多 CSS 開發者對匯入的做法都不太感冒，因為它需要多次的 HTTP 請求。但是在 CSS 前處理器中的匯入操作則不同，它只是在語義上包含了不同的檔案，但最終結果是一個單一的 CSS 檔案，如果你是通過 @ import "file.css"; 匯入 CSS 檔案，那效果跟普通的 CSS 匯入一樣。注意：匯入檔案中定義的混入、變數等資訊也將會被引入到主樣式檔案中，因此需要避免它們互相沖突。LESS Sass及Stylus都一樣，如下目錄程式碼

其中test.styl程式碼如下：

      font-size = 14px

　　body

  　font font-size Arial, sans-seri

main.styl程式碼如下：

   @import "index.css";

   @import "test.styl";

  p {

       background: #0982C1;

  }

Index.css程式碼如下：

p {

    color #3333;   

}

編譯執行 stylus <main.styl> main.css 最終生成程式碼如下：

@import "index.css";

body {

  font: 14px Arial, sans-seri;

}

p {

  background: #0982c1;

}

六：運算子：(三者一樣)

    你可以直接在 CSS 前處理器中進行樣式的計算，例如：

body {

  margin: (14px/2);

  top: 50px + 100px;

  right: 100px - 50px;

  left: 10 * 10;

}

最終編譯程式碼如下：

body {

  margin: 7px;

  top: 150px;

  right: 50px;

  left: 100;

}

以上是基本的語法比較，一些函式一般情況下css用不到，所以沒有列出來。

    如果大家對stylus感興趣的話，希望大家研究下stylus哦！關鍵是如何使用chrome或者firefox如何更方便的調式，和上面的Less或者Sass一樣的方便調式，我們大家都知道 stylus比less sass語法更方便，使用起來更好，但是目前我沒有看到Stylus的調式沒有Less，sass方便，因此想問問大家有沒有使用過Stylus開發專案？那麼如果用過如何更方便的調式程式碼？希望大家有研究過希望能分享下？謝謝了！

 LESS和Sass及Stylus Demo下載

相關文章