css前置處理器--less

一、概要
Less 是一門 CSS 預先處理語言，它擴充了 CSS 語言，增加了變數、Mixin、函數等特性，使 CSS 更易維護和擴充。
Less 可以運行在 Node 或瀏覽器端
二、less環境搭建
可以在服務端或者用戶端使用less
1.在服務端使用：
安裝less編譯工具：npm install less -g
安裝 Less 後，就可以在命令列上調用 Less 編譯器了，如下：
lessc styles.less
這將輸出編譯之後的 CSS 代碼到 stdout，你可以將輸出重新導向到一個檔案：
$ lessc styles.less > styles.css
若要輸出壓縮過的 CSS，只需添加 -x 選項。如果希望獲得更好的壓縮效果，還可以通過 –clean-css 選項啟用 Clean CSS 進行壓縮。
執行 lessc 且不帶任何參數，就會在命令列上輸出所有可用選項的列表

在idea中使用less（需要安裝File Watchers外掛程式）

2.用戶端使用less：
在用戶端使用 Less.js 是最容易的方式，並且在開發階段很方便，但是，在生產環境中，效能和可靠性非常重要，建議最好使用 node.js 或其它第三方工具進行先行編譯。
在頁面中加入 .less 樣式表的連結，並將 rel 屬性設定為 “stylesheet/less”：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

接下來，下載 less.js 並通過 標籤將其引入，放置於頁面的 元素內：

<script src="less.js" type="text/javascript"></script>

3.在sublime中使用less：
首先需要安裝less：npm install -g less
還需要安裝一個less外掛程式用於壓縮css檔案：npm install -g less-plugin-clean-css

然後安裝sublime外掛程式（ctrl+shift+p>install Package）： 文法高亮外掛程式：less less檔案編譯外掛程式：less2css