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

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;
        &: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下載