自從用了Less 編寫css，你比以前更快了~

之所以用這個標題呢,主要是最近調侃傑倫太有意思了。

好吧，開個玩笑而已。

如果你了解過Less，並對之很熟悉，就不用往下看了。

如果你沒用過，恭喜，這是一個入門級的教程，學會了它，可以為你節省10%的繩命。

首先，我們得知道Less能干什么。如：

@width:300px;
@fonts:12px bold "宋體,Verdana";
.block-header{
    color:#5c5c5c;
    .elem-title{
        font:@fonts;
        width:@width;
    }
    .elem-content{
        width:@width;
        height:300px;
    }
}
.block-footer{
    font:@fonts;
    width:@width + 100px;
}

最后編譯出來的css是這樣的：

.block-header {
  color: #5c5c5c;
}
.block-header .elem-title {
  font: 12px bold "宋體,Verdana";
  width: 300px;
}
.block-header .elem-content {
  width: 300px;
  height: 300px;
}
.block-footer {
  font: 12px bold "宋體,Verdana";
  width: 400px;
}

如何安裝（主要是基於sublime編輯器，其他編輯器自行google）

用less進行編譯css，有很多途徑，可以用nodejs。當然我們希望以最簡單的方式來完成，比如：新建一個 test.less文件，按 ctrl +s 即編譯成 test.css.

要實現我所描述的功能，你只需要下載一個sublime編輯器，

1）打開sublime：

ctrl + shift + p

將出現如下界面：

 

2）輸入：LessToCss 

點擊后即可安裝

3）注：LessToCss對lessc.cmd有依賴，如果是mac，則比較簡單，只需要在終端輸入： npm install less -gd

等下載完就算完成了所有配置。跳過 4）。

4）windows下，LessToCSS對lessc.cmd有依賴，請下載：

https://github.com/duncansmart/less.js-windows/releases后 將其路徑（i.e:  E:/Less）添加至系統環境變量中：

5)重啟sublime.

6)新建一個文件：test.less   。把上面我寫的復制進去，ctrl+s. 你能看到在你目錄下自動生成了test.css.

注:默認 在  xx.less文件的同級目錄下生成 xx.css，且自動壓縮。

通過：Preference —— Package Settings —— Less2Css ——Setting Default 可以看默認配置：

{
  "lesscCommand": false,
  "lessBaseDir": "./",   
  "outputDir": "./",  
  "outputFile": "", //[example.css] if left blank uses same name of .less file
  "minify": true,   //默認壓縮
  "minName": false,
  "autoCompile": true,
  "showErrorWithWindow": false,
  "main_file": false,
  "ignorePrefixedFiles": false
}

如果的dev環境中不想壓縮，可以通過 Preference —— Package Settings —— Less2Css ——Setting User 增加：

{"minify": false}

到這里，你應該已經學會如何安裝了。

語言特性快速預覽——這里其實可以參考官網，我也是從哪抄來的

1）變量：變量允許我們單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。

less源碼：

@color: #4D926F;

#header {
    color: @color;
}
h2 {
    color: @color;
}

less編譯后：

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

2）混合（Mixins）：混合可以將一個定義好的class A輕松的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶參數地調用，就像使用函數一樣。

less源碼：

.rounded-corners (@radius: 5px) {     //淚如雨下啊：有了這個函數，以后再也不用每個樣式里面寫那么多兼容了，每次只要.rounded-corners(8px)   .rounded-corners(10px).  Awesome
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

less編譯后：

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

3）嵌套：我們可以在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度減少了代碼量，並且代碼看起來更加的清晰。

less源碼：

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

less編譯后：

#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中的函數一一映射了JavaScript代碼，如果你願意的話可以操作屬性值。

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%);
}

less編譯后：

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

就這么多，語法是不是 so easy？

參考：

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