自從用了Less 編寫css，你比之前更快了~（sublime編譯）

之因此用這個標題呢,主要是最近調侃杰倫太有意思了。

好吧，開個玩笑而已。

若是你瞭解過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.

安裝方法二(管用，第一個方法沒成功)：

      插件下載地址： download github

　　1.解壓壓縮包

　　2.將文件夾lessc拷貝到Sublime Text 2\Data\Packages 下

使用幫助：

　　使用時，每保存*.less 文件時會自動編譯生成 同名的.css文件。

　　在菜單 Preferences>Package Settings>Lessc>Settings 中能夠設置是否壓縮編譯後的css

　　不想使用該插件 能夠禁用此包（Package Control:Disable Package選擇lessc）也可直接刪除lessc文件夾卸載插件

 

注:默認 在  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

http://www.cnblogs.com/wuya16/p/LessToCss.html