Less用法指南

　　目錄：

• 　　  什麼是LESS
• 　　目的
• 　　語法
• 　　　　變量（Variables）
• 　　　　混合（Mixins）
• 　　　　運算符（Operations）
• 　　　　功能函數（Functions）
• 　　　　嵌套規則（Nested Rules）
• 　　　　命名空間（Namespaces）
• 　　　　註釋（Comments）

　　一、什麼是LESS

　　LESSCSS是一種動態樣式語言，屬於CSS預處理語言的一種，它使用相似CSS的語法，爲CSS的賦予了動態語言的特性，如變量、繼承、運算、函數等，更方便CSS的編寫和維護。

　　LESSCSS能夠在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。

　　LESSCSS是一種由Alexis Sellier設計的動態層疊樣式表語言。受Sass所影響，同時也影響了Sass的新語法：SCSS。[1]

　　LESSCSS是開源的，其第一個版本由Ruby寫成，但在後續的版本當中，Ruby逐漸被複用爲JavaScript。受益於JavaScript，LESS能夠在客戶端上運行（IE6+、Webkit、Firefox），也能夠在服務端運行（Node.js、Rhino）。

　　二、目的

　　學習筆記，裏邊加了一些體會。同時也但願之後不用去參照官方文檔了。中文官網、英文官網。

　　三、語法：

　　3.一、變量（Variables）

　　其實更應該稱爲常量。由於只能取最後一次的賦值。

　　語法規則：

　　@變量名：值;

　　值能夠是css屬性值，也能夠是其餘變量

　　3.1.1 css屬性值

@backColor: yellow;
.a {
    background-color: @backColor;
}
@backColor: blue;
.b {
    background-color: @backColor;
}

　　編譯後：

.a {
  background-color: #0000ff;
}
.b {
  background-color: #0000ff;
}

　　從編譯後的結果能夠看出來，只取變量的最後一次賦值結果。

@backColor: blue;

　　 3.1.2 變量名作做爲變量

@com: color;
@color: #111;
#header {
    background-color: @@com + 5 * 2;
    color: @color;
}

　　編譯後：

#header {
  background-color: #1b1b1b;
  color: #111111;
}

　　 注：僅支持@@，不支持>2@。　　3.1.3 做用域（scope）

@color: red;

#header {
  @color: white;
  .a {
    color: @color; // white
  }
}

.b {
  color: @color; // red  
}

　　編譯後：

#header .a {
  color: #ffffff;
}
.b {
  color: #ff0000;
}

　　能夠看出來，LESS中變量做用域處理方式和js一致，採用鏈式做用域方式。至於上面的嵌套寫法，先不用理解，後面會說到。　

　　用法：

　　一、統一的樣式修改（固然沒有LESS以前，咱們也能夠經過規範進行實現）；　　

　　二、四則運算（Operations），雖然僅僅四則，可是已經能夠完成大多數功能了；　　

　　三、和混合（Mixins）結合使用，你像使用函數一下使用他；　　

　　四、和js相同的鏈式做用域，前端工程師很是容易理解。

　　3.2 混合（Mixins）　　

　　我把他分爲兩種形式：函數和複用。　　

　　Bad smell（代碼的壞味道）中第一條通常就是Duplicated Code（重複代碼）。如何解決？就是代碼封裝。Mixins就是這樣一個做用。　　

　　函數：

.c(@bg: red) {
    background-color: @bg;
    width: 100px;
    height: 200px;
}
@bgc: yellow;
.a {
    .c(@bgc);
}
@bgColor: @bgc + #111;
.b {
    .c(@bgColor);
}
.d {
    .c();
}

　　編譯以後的代碼：

.a {
  background-color: #ffff00;
  width: 100px;
  height: 200px;
}
.b {
  background-color: #ffff11;
  width: 100px;
  height: 200px;
}
.d {
  background-color: #ff0000;
  width: 100px;
  height: 200px;
}

　　 注：編譯以後沒有.c相關內容。

　　@arguments　　　　

　　這個寫法借簽了js的函數參數。通常用於一些簡寫方式：

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}

#header {
    .boxShadow(2px,2px,3px,#f36);
}

　　編譯後：

#header {
  -moz-box-shadow: 2px 2px 3px #ff3366;
  -webkit-box-shadow: 2px 2px 3px #ff3366;
  box-shadow: 2px 2px 3px #ff3366;
}

　　複用：

.d {
    .e;
}
.e {
    position: absolute;
}
#f {
    position: relative;;
}
.m {
    #f;
}

　　編譯以後

.d {
  position: absolute;
}
.e {
  position: absolute;
}
#f {
  position: relative;
}
.m {
  position: relative;
}

　　發現沒有？.e和#f內容都存在。

　　注：class, id 屬性集均可以以一樣的方式複用。　　

　　「函數」和「複用」區別：　　

　　一、前者能夠傳參；　　

　　二、前者編譯以後不存在，後者依然存在。　

　　用法：　　

　　一、代碼封裝；　　

　　二、同變量一同，像函數同樣使用，封裝以後咱們能夠進行統一的樣式修改；　　

　　三、樣式複用，主要針對「複用」。

　　3.3 運算符（Operations）　　

　　目前僅支持加、減、乘、除四則運算，主要針對數字、顏色、變量的操做。

@baseWith: 100px;
@baseHeight: 50px;
@baseColor: #333;

.a {
    
    height: @baseHeight + 300;
    min-width: @baseWith - @baseHeight;
    width: @baseWith * 3;
    color: @baseColor / 3;
}

　　編譯後：

.a {
  height: 350px;
  min-width: 50px;
  width: 300px;
  color: #111111;
}

 　　可使用（）改變運算的前後順序

@com: 25px;
#header {
    width: @com + 5 * 2;
    height: (@com + 5 ) * 2;
}

　　編譯後：

#header {
  width: 35px;
  height: 60px;
}

　　3.4 功能函數（Functions）　　

　　主要針對color的處理。提供以下函數：

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

　　本人使用的不是不少，想了解更詳細的新能夠參考官網，或者這裏。

　　3.5 嵌套規則（Nested Rules）

　　爲了和上面作區分，同時帶入一個新功能，以一個新例子開始。html代碼以下：

<div id="header">
    <h1><a href="http://www.cnblogs.com/hanyangecho/">hanyangecho</a></h1>
    <p>個人世界</p>
</div>

　　LESS代碼以下：

#header {
    display: inline;
    float: left;
    h1 {
        font-size: 26px;
        font-weight: bold;
        a {
            text-decoration: none;
            color: #f36;
            &:hover {
                text-decoration: underline;
                color: #63f;
            }
        }
    }
    p {
        font-size: 12px;
    }
}

　　編譯以後：

#header {
  display: inline;
  float: left;
}
#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header h1 a {
  text-decoration: none;
  color: #f36;
}
#header h1 a:hover {
  text-decoration: underline;
  color: #63f;
}
#header p {
  font-size: 12px;
}

　　說實話，第一次看到這種寫法的時候，我就愛上LESS了。這不就是DOM的寫法嗎？這種寫法不管後期維護、理解都是那麼天然。是否是有一種原本就該如此的感受？

　　注意一下上面那個&符號。

在Less中嵌套書寫中有沒有&是徹底不同的效果，有&時解析的是同一個元素或此元素的僞類，沒有&解析是後代元素，咱們一塊兒來看一段代碼

#header {
    &.fl{
        float: left;
    }
    .mln {
        margin-left: 0;
    }
}

　　編譯後：

#header.fl { float: left; }
#header .mln { margin-left: 0; }

　　3.6 命名空間（Namespaces）

　　這種方式支持咱們經過命名空間的方式訪問上面嵌套中的「函數」或「複用」。

#header {
    .a(@bgColor: red) {
        background-color: @bgColor;
    }
    .b {
        width: 100px;
    }
}
.c {
    #header > .a(yellow); 
    #header > .b;
    height: 200px;
}

　　編譯後：

#header .b {
  width: 100px;
}
.c {
  background-color: #ffff00;
  width: 100px;
  height: 200px;
}

　　 3.7註釋（ Comments）

　　單行：//多行：/**/

 

參考：

　　http://www.w3cplus.com/css/less

　　http://www.lesscss.net/article/document.html