大話css預編譯處理（三）：基礎語法篇

時間 2019-11-15

標籤大話 css 編譯處理基礎語法欄目 CSS 简体版

原文原文鏈接

1、Sass、LESS和Stylus的語法

每一種語言都有本身必定的語法規則，CSS預處理器語言也不例外，在真正使用CSS預處器語言以前還有一個不可缺乏的知識點，就是對語法的理解。值得慶幸的是，這三款CSS預處理器語言的語法和CSS語法都差很少。

1.Sass語法

Sass3.0版本開始使用的是標準的CSS語法，和SCSS能夠說是同樣的。這樣Sass代碼轉換成CSS代碼變得更容易。默認Sass使用.scss擴展名。Sass語法規則能夠像CSS那樣書寫：css

/*style.sass新版語法規則*/
h1{
  color:#936;
  background-color:#333;
}

正如你所看到的，在Sass樣式中，這樣的代碼是在簡單不過的了。
重要的一點是，Sass也同時支持老的語法，老的語法和常規的CSS語法略有不一樣，他須要嚴格的語法，任何的縮進和字符的錯誤都會形成樣式的編譯錯誤。Sass能夠省略大括號（｛｝）和分號（；），徹底依靠嚴格的縮進和格式化代碼，並且文件使用.sass擴展名，他的語法相似於：前端

/*style.sass*/
h1
  color:#936
  background-color: #333

2.LESS語法

LESS是CSS的一種擴展形式，它並無閹割CSS的功能，而是在現有的CSS語法上，添加了不少額外的功能。就語法規則而言，LESS和Sass同樣，都是使用CSS的標準語法，只是LESS的源文件的擴展名是.less，其基本語法相似於：express

/*style.less*/
h1 {
  color: #963;
  background-color: #333;
}

3.Stylus語法

Stylus的語法花樣多一些，它的文件擴展名是.styl，Stylus也接受標準的CSS語法，可是他也像Sass老的語法規則，使用縮進控制，同時Stylus也接受不帶大括號（｛｝）和分號的語法，以下所示：編程

/*style.styl*/
/*相似於CSS標準語法*/
h1 {
  color: #963;
  background-color:#333;
}

/*省略大括號（｛｝）*/
h1 
  color: #963;
  background-color: #333;

/*省略大括號（｛｝）和分號（;）*/
h1
  color:#963
  background-color:#333

在Stylus樣式中，你也能夠在同一個樣式文件中使用不一樣的語法規則，下面這樣的寫法也不會報錯：sass

/*style.styl*/
h1 {
  color  #963
}
h2 
  font-size:1.2em

2、 Sass、LESS和Stylus特性

這三款CSS預處理器語言具備一些相同的特性，例如：變量、混入、嵌套、函數等。在這一節中，咱們依次來對比一下這三款CSS預處理器語言各類特性的異同之處，以及使用方法。

1.變量（Variables）

若是你是一個開發人員，變量應該是你最好朋友之一。在CSS預處理器語言中你也能夠聲明變量，並在整個樣式表中使用。CSS預處理器語言支持任何變量（例如：顏色、數值、文本）。而後你能夠在任意地方引用變量。服務器

a)Sass的變量

Sass聲明變量必須是「$」開頭，後面緊跟變量名和變量值，並且變量名和變量值須要使用冒號（：）分隔開。就像CSS屬性設置同樣：app

/*聲明變量*/

$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;

/*調用變量*/                              |  /*轉譯出來的CSS*/
------------------------------------------+------------------------------
body {                                    |  body {
  color: $mainColor;                      |    color: #963;
  border:1px $borderStyle $mainColor;     |    border:1px dotted #963;
  max-width: $siteWidth;                  |    max-width: 1024px;
}                                         |  }

b) LESS的變量

LESS樣式中聲明變量和調用變量和Sass同樣，惟一的區別就是變量名前面使用的是「@」字符：less

/*聲明變量*/

    @mainColor: #963;
    @siteWidth: 1024px;
    @borderStyle: dotted;
    
    /*調用變量*/                            |  /*轉譯出來的CSS*/
    ----------------------------------------+-------------------------------
    body {                                  |  body {
      color: @mainColor;                    |    color:#963;
      border:1px @borderStyle @mainColor;   |    border:1px dotted #963;
      max-width: @siteWidth;                |    max-width:1024px;
    }   

                                |  }

c)Stylus的變量

Stylus樣式中聲明變量沒有任何限定，你可使用「$」符號開始。結尾的分號（;）無關緊要，但變量名和變量值之間的等號（=）是須要的。有一點須要注意的是，若是咱們使用「@」符號開頭來聲明（0.22.4）變量，Stylus會進行編譯，但其對應的值並不會賦值給變量。換句話說，在Stylus中不要使用「@」符號開頭聲明變量。Stylus中調用變量的方法和LESS、Sass是徹底相同的。編程語言

/*聲明變量*/

mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;

/*調用變量*/                            |    /*轉譯出來的CSS*/
----------------------------------------+--------------------------------
body                                    | body {
  color mainColor                       |   color: #963;
  border 1px $borderStyle mainColor     |   border:1px dotted #963
  max-width siteWidth                   |   max-width:1024px;
                                        | }

Stylus還有一個獨特功能，不須要分配值給變量就能夠定義引用屬性：函數

/*水平垂直居中*/                    |  /*轉譯出來的CSS*/
------------------------------------+------------------------------------
#logo                               |   #logo {
  position  absolute                |     position:absolute;
  top  50%                          |     top:50%;
  left  50%                         |     left:50%;
  width  w = 150px                  |     width:150px;
  height  h = 80px                  |     height:80px;
  margin-left  -(w / 2)             |     margin-left:-75px;
  margin-top  -(h / 2)              |     margin-top:-40px;
                                    |   }

從上面的代碼中咱們能夠看出，CSS預處理器語言中的變量是值級別的重複使用，能夠將相同的值定義成變量統一管理起來。
CSS預處理器語言中變量的特性適用於定義主題（也就是咱們常說的換膚），咱們能夠將背景顏色、字體顏色、邊框屬性等常規樣式統必定義，這樣不一樣的主題只須要定義不一樣的變量文件就能夠。

2.做用域（Scope）

CSS預處理器語言中的變量和其餘程序語言同樣，能夠實現值的複用，一樣它也存在生命週期，也就是Scope（變量範圍，開發人員習慣稱之爲做用域），簡單點講就是局部變量仍是全局變量的概念，查找變量的順序是先在局部定義中找，若是找不到，則查找上級定義，直至全局。下面咱們經過一個簡單的例子來解釋這三款CSS預處理器的做用域使用。

a)Sass的做用域

Sass中做用域在這三款預處理器是最差的，能夠說在Sass中是不存在什麼全局變量。具體來看下面的代碼：

/*Sass樣式*/
$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
}

先看轉譯出來的CSS樣式：

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（無全局變量概念）*/
}

示例明顯的告訴咱們，在Sass樣式中定義變量，調用變量是沒有全局變量一個概念存在，所以在Sass中定義了相同變量名時，在調用之時千萬要多加當心，否則會給你的樣式帶來錯誤。

b)LESS的做用域

LESS中的做用域和其餘程序語言中的做用域很是的相同，他首先會查找局部定義的變量，若是沒有找到，會像冒泡同樣，一級一級往下查找，直到根爲止，一樣上面的例子，咱們來看看他在LESS下所起的變化。

/*LESS樣式*/

    @color: black;
    .scoped {
      @bg: blue;
      @color: white;
      color: @color;
      background-color:@bg;
    }
    .unscoped {
      color:@color;
    }

轉譯出來的CSS樣式：

.scoped {
  color:white;/*白色（調用了局部變量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（調用了全局變量）*/
}

c)Stylus的做用域

Stylus雖然起步比較晚，但其做用域的特性和LESS同樣，能夠支持全局變量和局變量。會向上冒泡查找，直到根爲止。

3.混合(Mixins)

Mixins是CSS預處理器中語言中最強大的特性，簡單點來講，Mixins能夠將一部分樣式抽出，做爲單獨定義的模塊，被不少選擇器重複使用。平時你在寫樣式時確定有碰到過，某段CSS樣式常常要用到多個元素中，這樣你就須要重複的寫屢次。在CSS預處理器語言中，你能夠爲這些公用的CSS樣式定義一個Mixin，而後在你CSS須要使用這些樣式的地方直接調用你定義好的Mixin。這是一個很是有用的特性，Mixins被看成一個公認的選擇器，還能夠在Mixins中定義變量或者默認參數。

a)Sass的混合

Sass樣式中聲明Mixins時須要使用「@mixin」，而後後面緊跟Mixins的名，他也能夠定義參數，同時能夠給這個參數設置一個默認值，但參數名是使用「$」符號開始，並且和參數值之間須要使用冒號（：）分開。

在選擇器調用定義好的Mixins須要使用「@include」，而後在其後緊跟你要調用的Mixins名。不過在Sass中還支持老的調用方法，就是使用加號「+」調用Mixins，在「+」後緊跟Mixins名。
一塊兒來看個簡單的例子，好比說在你的Sass樣式中定義了一個名叫「error」的Mixin，這個「error」設置了一個參數「$borderWidth」，在沒特別定義外，這個參數的默認值設置爲「2px」：

/*聲明一個Mixin叫做「error」*/
@mixin error($borderWidth:2px){
  border:$borderWidth solid #f00;
  color: #f00;
}
/*調用error Mixins*/
.generic-error {
  @include error();/*直接調用error mixins*/
}
.login-error {
  @include error(5px);/*調用error mixins，並將參數$borderWidth的值重定義爲5px*/
}

b)LESS的混合

在LESS中，混合是指將定義好的「ClassA」中引入另外一個已經定義的「Class」，就像在當前的「Class」中增長一個屬性同樣。

不過LESS樣式中聲明Mixins和Sass聲明方法不同，他更像CSS定義樣式，在LESS能夠將Mixins當作是一個類選擇器，固然Mixins也能夠設置參數，並給參數設置默認值。不過設置參數的變量名是使用「@」開頭，一樣參數和默認參數值之間須要使用冒號（：）分隔開。

正如Sass混合是的示例，一樣在LESS樣式中定義一個名叫「error」的Mixin，這個「error」設置了一個參數「@borderWidth」，在沒有特別定義外，這個參數的默認值是「2px」：

/*聲明一個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*/
}

c)Stylus的混合

Stylus中的混合和前兩款CSS預處理器語言的混合略有不一樣，他能夠不使用任何符號，就是直接聲明Mixins名，而後在定義參數和默認值之間用等號（=）來鏈接。

/*聲明一個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*/
}

三個示例都將會轉譯成相同的CSS代碼：

.generic-error {
  border: 2px solid #f00;
  color:#f00;
}
.login-error {
  border:5px solid #f00;
  color: #f00;
}

4.嵌套（Nesting）

CSS預處理器語言中的嵌套指的是在一個選擇器中嵌套另外一個選擇器來實現繼承，從而減小代碼量，而且增長了代碼的可讀性。好比說，咱們在CSS中多個元素有一個相同的父元素，那麼寫樣式會變得很乏味，咱們須要一遍一遍的在每一個元素前寫這個父元素，除非給特定的元素添加類名「class」或者ID。

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

相反，使用CSS預處理器語言的嵌套特性，咱們能夠在父元素的大括號（｛｝）裏寫這些元素。同時可使用「&」符號來引用父選擇器。對於Sass、LESS和Stylus這三款CSS預處理器語言的嵌套選擇器來講，他們都具備相同的語法：

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

上面的預處理器轉譯出來的CSS代碼和咱們開始展現的CSS代碼是相同的，很是的方便吧！

5.繼承（Inheritance）

對於熟悉CSS的同窗來講，對於屬性的繼承並不陌生。平時在寫CSS樣式常碰到多個元素應用相同的樣式時，咱們在CSS中一般都是這樣寫：
p,ul,ol{/*樣式寫在這裏*/}
這樣作很是的好，但每每咱們須要給單獨元素添加另外的樣式，這個時候咱們就須要把其中選擇器單獨出來寫樣式，如此一來咱們維護樣式就至關的麻煩。爲了應對這個問題，CSS預處理器語言能夠從一個選擇繼承另個選擇器下的全部樣式。

a)Sass和Stylus的繼承

Sass和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;
}

上面的代碼轉譯成CSS：

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

b)LESS的繼承

LESS支持的繼承和Sass與Stylus不同，他不是在選擇器上繼承，而是將Mixins中的樣式嵌套到每一個選擇器裏面。這種方法的缺點就是在每一個選擇器中會有重複的樣式產生。

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*繼承.block選擇器下全部樣式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*繼承.block選擇器下全部樣式*/
  color: #333;
  text-transform: uppercase;
}

轉譯出來的CSS代碼：

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

正如所看到的，上面的代碼「.block」的樣式將會被插入到相應的你要繼承的選擇器中，但須要注意的是優先級的問題。

6.運算符（Operations）

CSS預處理器語言還具備運算的特性，其簡單的講，就是對數值型的Value（如：數字、顏色、變量等）進行加減乘除四則運算。這樣的特性在CSS樣式中是想都不敢想的，但在CSS預處理器語言中對樣式作一些運算一點問題都沒有了，例如：

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

上面代碼是LESS的運算示例，聲明一下，在取得「@quarter_page」變量時，咱們能夠直接除以4，可是在這裏，咱們只是想演示一下圓括號組成的「運算順序」（這個運算順序小學生也知道）。在複合型運算中，小括號也是頗有必要的，例如：

border: (@width / 2) solid #000;

Sass在數字運算上要比LESS更專業，他能夠直接換算單位了。Sass能夠處理沒法識別的度量單位，並將其輸出。這個特性很明顯是一個對將來的嘗試——證實W3C做出的一些改變。
Stylus的運算是三款預處理器語言中最強大的一款，他擁有其餘程序語言同樣的運算功能，簡單點的加減乘除，複雜的有關係運算、邏輯運算等。受限於篇幅，感興趣的同窗能夠到官網上仔細閱讀。

7.顏色函數

顏色函數是CSS預處理器語言中內置的顏色函數功能，這些功能能夠對顏色進行處理，例如顏色的變亮、變暗、飽和度控制、色相控制，漸變顏色等處理十分的方便。

a)Sass顏色函數

lighten($color, 10%); /* 返回的顏色在$color基礎上變亮10% */
darken($color, 10%);  /* 返回的顏色在$color基礎上變暗10% */
saturate($color, 10%);   /* 返回的顏色在$color基礎上飽和度增長10% */
desaturate($color, 10%); /* 返回的顏色在$color基礎上飽和度減小10% */
grayscale($color);  /* 返回$color的灰度色*/
complement($color); /* 返回$color的補色 */
invert($color);     /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

這只是Sass中顏色函數的一個簡單列表，更多詳細的介紹能夠閱讀Sass文檔。
顏色函數能夠運用到任何一個元素上，只要其有顏色的屬性，下面是一個簡單的例子：

$color: #0982C1;
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);/*邊框顏色在$color的基礎上變暗50%*/
}

b)LESS顏色函數

lighten(@color, 10%); /* 返回的顏色在@color基礎上變亮10% */
darken(@color, 10%);  /* 返回的顏色在@color基礎上變暗10%*/
saturate(@color, 10%);   /* 返回的顏色在@color基礎上飽和度增長10% */
desaturate(@color, 10%); /* 返回的顏色在@color基礎上飽和度下降10%*/
spin(@color, 10);  /* 返回的顏色在@color基礎上色調增長10 */
spin(@color, -10); /* 返回的顏色在@color基礎上色調減小10 */
mix(@color1, @color2); /* 返回的顏色是@color1和@color2二者的混合色 */

LESS的完整顏色函數功能，請閱讀LESS文檔。
下面是LESS中如何使用一個顏色函數的簡單例子：

@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

c)Stylus的顏色函數

lighten(color, 10%); /* 返回的顏色在'color'基礎上變亮10% */
darken(color, 10%);  /* 返回的顏色在'color'基礎上變暗10% */
saturate(color, 10%);   /* 返回的顏色在'color'基礎上飽和度增長10% */
desaturate(color, 10%); /* 返回的顏色在'color'基礎上飽和度下降10% */

有關於Stylus的顏色函數介紹，請閱讀Stylus文檔。
下面是Stylus顏色函數的一個簡單實例：

color = #0982C1
h1
  background color
  border 3px solid darken(color, 50%)

從上面展現的部分顏色函數能夠告訴咱們，Sass、LESS和Stylus都具備強大的顏色函數功能，功能特性上都大同小異，只是在使用方法上略有不一樣。並且他們都具備相同的一個目的，就是方便操做樣式中的顏色值。

8.導入（Import）

在CSS中，並不喜歡用@import來導入樣式，由於這樣的作法會增長http的請求。可是在CSS預處理器中的導入(@import)規則和CSS的有所不一樣，它只是在語義上導入不一樣的文件，但最終結果是生成一個CSS文件。若是你是經過「@import‘file.css’」導入「file.css」樣式文件，那效果跟普通CSS導入樣式文件同樣。注意：導入文件中定義了變量、混合等信息也將會被引入到主樣式文件中，所以須要避免他們的相互衝突。

Sass、LESS和Stylus三款CSS預處理器語言，導入樣式的方法都是同樣：
被導入文件的樣式：

/* file.{type} */
body {
  background: #EEE;
}

須要導入樣式的文件：

@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
}

轉譯出來的CSS代碼：

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

9.註釋（Comment）

CSS預處理器語言中的註釋是比較基礎的一部分，這三款預處理器語言除了具備標準的CSS註釋以外，還具備單行註釋，只不過單行註釋不會被轉譯出來。

a)Sass、LESS和Stylus的多行註釋

多行註釋和CSS的標準註釋，他們能夠輸出到CSS樣式中，但在Stylus轉譯時，只有在「compress」選項未啓用的時候纔會被輸出來。

/*
 *我是註釋
*/
body
  padding 5px

b)Sass、LESS和Stylus的單行註釋

單行註釋跟JavaScript語言中的註釋同樣，使用雙斜槓（//），但單行註釋不會輸出到CSS中。

//我是註釋

    @mainColor：#369;//定義主體顏色

在Stylus中除了以上兩種註釋以外，他還有一種註釋，叫做多行緩衝註釋。這種註釋跟多行註釋相似，不一樣之處在於始的時候，這裏是」/*！」。這個至關於告訴Stylus壓縮的時候這段無視直接輸出。

/*!
*給定數值合體
*/
add(a, b)
  a + b

上面從九個經常使用的特性對Sass、LESS和Stylus三款CSS預處理器語言的使用作了對比，在某些特性上能夠說是如出一轍，而有一些特性上功能其實同樣，只是在部分書寫規則上有所不一樣。固然有些特性是徹底不一樣。在這裏幾是從使用方法上作爲一個比較，主要目的是讓你們通過對比以後，使本身選擇哪一款CSS預處理器語言有所方向和幫助。

3、 CSS預處理器的高級應用

咱們知道，Sass、LESS和Stylus都具備變量、混合、嵌套、函數和做用域等特性，但這些特性都是一些普通的特性。其實除了這些特性以外，他們還擁有一些頗有趣的特性有助於咱們的開發，例如條件語句、循環語句等。接下來，咱們一樣從使用上來對比一下這三款CSS預處理器語言在這方面應用又有何不一樣異同。

a)條件語句

說到編程，對於編程基本控制流，你們並不會感到陌生，除了循環就是條件了。條件提供了語言的可控制，不然就是純粹的靜態語言。提供的條件有導入、混合、函數以及更多。在編程語言中常見的條件語句：

if/else if/else

if表達式知足（true）的時候執行後面語然塊，不然，繼續後面的else if或else。
在這三款CSS3預處理器語言中都具備這種思想，只不過LESS中表達的方式略有不現，接下來咱們依次看看他們具體如何使用。

Sass的條件語句

Sass樣式中的條件語句和其餘編程語言的條件語句很是類似，在樣式中可使用「@if」來進行判斷：

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

編譯出來的CSS：

p {
  border: 1px solid; 
}

在Sass中條件語句還能夠和@else if、@else配套使用：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

轉譯出來的CSS：

p {color:green;}

Stylus的條件語句

Stylus的條件語句的使用和其餘編程的條件語句使用基本相似，不一樣的是他能夠在樣式去省略大括號（｛｝）：

box(x, y, margin = false)
  padding y x
  if margin
    margin y x
body
  box(5px, 10px, true)    
Stylus一樣能夠和else if、else配套使用：
box(x, y, margin-only = false)
  if margin-only
    margin y x
  else
    padding y x

Stylus除了這種簡單的條件語句應用以外，他還支持後綴條件語句。這就意味着if和unless（熟悉Ruby程序語言的用戶應該都知道unless條件，其基本上與if相反，本質上是「(!(expr))」）看成操做符；當右邊表達式爲真的時候執行左邊的操做對象。
例如，咱們定義了negative()來執行一些基本的檢查。下面咱們使用塊式條件：

negative(n)
  unless n is a 'unit'
    error('無效數值')
  if n < 0
    yes
  else
    no

接下來，咱們利用後綴條件讓咱們的方法簡潔：

negative(n)
  error('無效數值') unless n is a 'unit'
  return yes if n < 0
  no

固然，咱們能夠更進一步。如這個「n < 0 ? yes : no」能夠用布爾代替：「n < 0」。後綴條件適合於大多數的單行語句。如「@import,@charset」混合書寫等。固然，下面所示的屬性也是能夠的：

pad(types = margin padding, n = 5px)
  padding unit(n, px) if padding in types
  margin unit(n, px) if margin in types

body
  pad()

body
  pad(margin)

body
  apply-mixins = true
  pad(padding, 10) if apply-mixins

上面代碼轉譯出來的CSS：

body {
  padding: 5px;
  margin: 5px;
}
body {
  margin: 5px;
}
body {
  padding: 10px;
}

LESS的條件語句

LESS的條件語句使用有些另類，他不是咱們常見的關鍵詞if和else if之類，而其實現方式是利用關鍵詞「when」。

.mixin (@a) when (@a >= 10) { 
  background-color: black; 
 } 
 .mixin (@a) when (@a < 10) { 
  background-color: white; 
 } 
 .class1 { .mixin(12) } 
 .class2 { .mixin(6) }

轉譯出來的CSS：

.class1 { 
  background-color: black; 
 } 
.class2 { 
  background-color: white; 
 }

利用When以及<、>、=、<=、>=是十分簡單和方便的。LESS並無停留在這裏，並且提供了不少類型檢查函數來輔助條件表達式，例如：iscolor、isnumber、isstring、iskeyword、isurl等等。

.mixin (@a) when (iscolor(@a)) { 
  background-color: black; 
 } 
 .mixin (@a) when (isnumber(@a)) { 
  background-color: white; 
 } 
 .class1 { .mixin(red) } 
 .class2 { .mixin(6) }

轉譯出來的CSS

.class1 { 
  background-color: black; 
 } 
 .class2 { 
  background-color: white; 
 }

另外，LESS的條件表達式一樣支持AND和OR以及NOT來組合條件表達式，這樣能夠組織成更爲強大的條件表達式。須要特別指出的一點是，OR在LESS中並非or關鍵詞，而是用,來表示or的邏輯關係。

.smaller (@a, @b) when (@a > @b) { 
  background-color: black; 
} 
.math (@a) when (@a > 10) and (@a < 20) { 
  background-color: red; 
} 
.math (@a) when (@a < 10)，(@a > 20) { 
  background-color: blue; 
} 
.math (@a) when not (@a = 10)  { 
  background-color: yellow; 
} 
.math (@a) when (@a = 10)  { 
  background-color: green; 
} 

.testSmall {.smaller(30, 10) } 
.testMath1 {.math(15)} 
.testMath2 {.math(7)} 
.testMath3 {.math(10)}

轉譯出來的CSS

.testSmall { 
  background-color: black; 
} 
.testMath1 { 
  background-color: red; 
  background-color: yellow; 
} 
.testMath2 { 
  background-color: blue; 
  background-color: yellow; 
} 
.testMath3 { 
  background-color: green; 
}

b)循環語句

Sass和Stylus還支持for循環語句，而LESS並沒支持for循環語句，但值得慶幸的是，在LESS中可使用When來模擬出for循環的特性。

Sass的循環語句

Sass中使用for循環語句須要使用@for，而且配合「from」和「through」一塊兒使用，其基本語法：

@for $var from <start> through <end> {語句塊}

咱們來看一個簡單的例子：

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

轉譯出來的CSS代碼：

.item-1 {  width: 2em; }
.item-2 {  width: 4em; }
.item-3 {  width: 6em; }

在Sass中循環語句除了@for語句以外，還有@each語句和@while語句
@each循環語法：

@each $var in <list>{語句塊}

來看個簡單的實例：

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

轉譯出來的CSS

.puma-icon {  background-image: url('/images/puma.png'); }
.sea-slug-icon {  background-image: url('/images/sea-slug.png'); }
.egret-icon {  background-image: url('/images/egret.png'); }
.salamander-icon {  background-image: url('/images/salamander.png')    }

@while循環使用和其餘編程語言相似：

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

轉譯出來的CSS

.item-6 {  width: 12em; }
.item-4 {  width: 8em; }
.item-2 {  width: 4em; }

Stylus的循環語句

在Stylus樣式中經過for/in對錶達式進行循環，形式以下：

for <val-name> [, <key-name>] in <expression>

例如：

body
  for num in 1 2 3
    foo num

轉譯出來CSS

body {
  foo: 1;
  foo: 2;
  foo: 3;
}

下面這個例子演示瞭如何使用<key-name>：

body
  fonts = Impact Arial sans-serif
  for font, i in fonts
    foo i font

轉譯出來的CSS

body {
  foo: 0 Impact;
  foo: 1 Arial;
  foo: 2 sans-serif;
}

LESS的循環語句

在LESS語言中並無如今的循環語句，但是像其條件語句同樣，經過when來模擬出他的循環功能。

.loopingClass (@index) when (@index > 0) {
  .myclass {
    z-index: @index;
  }
  // 遞歸
  .loopingClass(@index - 1);
}
// 中止循環
.loopingClass (0) {}

// 輸出
.loopingClass (3);

轉譯出的CSS

.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}

相比之下，Sass和Stylus對條件語句和循環語句的處理要比LESS語言強大。由於他們具備真正的語言處理能力。

綜上所述，咱們對Sass、LESS和Stylus作一個簡單的對比總結：三者都是開源項目；
Sass誕生是最先也是最成熟的CSS預處理器，有Ruby社區和Compass支持；Stylus早期服務器Node
JS項目，在該社區獲得必定支持者；LESS出現於2009年，支持者遠超於Ruby和Node JS社區；
Sass和LESS語法較爲嚴謹、嚴密，而Stylus語法相對散漫，其中LESS學習起來更快一些，由於他更像CSS的標準；
Sass和LESS相互影響較大，其中Sass受LESS影響，已經進化到了全面兼容CSS的SCSS；
Sass和LESS都有第三方工具提供轉譯，特別是Sass和Compass是絕配；
Sass、LESS和Stylus都具備變量、做用域、混合、嵌套、繼承、運算符、顏色函數、導入和註釋等基本特性，並且以「變量」、「混合」、「嵌套」、「繼承」和「顏色函數」稱爲五大基本特性，各自特性實現功能基本類似，只是使用規則上有所不一樣；
Sass和Stylus具備相似於語言處理的能力，好比說條件語句、循環語句等，而LESS須要經過When等關鍵詞模擬這些功能，在這一方面略遜一層；

若是你以爲這篇文章對你有所幫助，那就順便點個贊吧，點點關注不迷路~

黑芝麻哇，白芝麻發，黑芝麻白芝麻哇發哈！

前端哇發哈