快速入門
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便制作主題、擴充。
Less 可以運行在 Node、瀏覽器和 Rhino 平台上。網上有很多第三方工具幫助你編譯 Less 源碼。
例如：
@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } 編譯為：
.box { color: #fe33ac; border-color: #fdcdea; } .box div { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } 使用 Less
Less 可以通過 npm 在命令行上運行；在瀏覽器上作為腳本文件下載；或者集成在廣大的第三方工具內。請參考 用法 。
安裝
在服務器端最容易的安裝方式就是通過 npm （node.js 的包管理器），方法如下：
$ npm install -g less
命令行用法
安裝 Less 后，就可以在命令行上調用 Less 編譯器了，如下：
$ lessc styles.less
這將輸出編譯之后的 CSS 代碼到 stdout，你可以將輸出重定向到一個文件：
$ lessc styles.less > styles.css
若要輸出壓縮過的 CSS，只需添加 -x 選項。如果希望獲得更好的壓縮效果，還可以通過 --clean-css 選項啟用 Clean CSS 進行壓縮。
執行 lessc 且不帶任何參數，就會在命令行上輸出所有可用選項的列表。
在代碼中調用 Less
可以像下面這樣在代碼中調用 Less 編譯器（Node 平台）。
var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, css) { console.log(css); }); 輸出為
.class { width: 2; } 你還可以手動調用分析器（paser）和編譯器：
var parser = new(less.Parser); parser.parse('.class { width: (1 + 1) }', function (err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); }); 配置
可以給編譯器傳遞多個參數：
var parser = new(less.Parser)({ paths: ['.', './lib'], // Specify search paths for @import directives filename: 'style.less' // Specify a filename, for better error messages }); parser.parse('.class { width: (1 + 1) }', function (e, tree) { tree.toCSS({ // Minify CSS output compress: true }); }); Grunt
Less 還和流行的 Grunt 構建工具進行了集成，可以參考 grunt-contrib-less 插件。
第三方工具
請參考 用法 一節了解其它工具的細節。
客戶端用法
在瀏覽器上跑 less.js 非常方便開發，但是不推薦用於生產環境。
在客戶端使用 Less.js 是最容易的方式，並且在開發階段很方便，但是，在生產環境中，性能和可靠性非常重要，我們建議最好使用 node.js 或其它第三方工具進行預編譯。
那就開始吧，在頁面中加入 .less 樣式表的鏈接，並將 rel 屬性設置為 "stylesheet/less"：
<link rel="stylesheet/less" type="text/css" href="styles.less" /> 接下來，下載 less.js 並通過 <script></script> 標簽將其引入，放置於頁面的 <head> 元素內：
<script src="less.js" type="text/javascript"></script> 提示
- 務必確保在 less.js 之前加載你的樣式表。
- 如果加載多個
.less樣式表文件，每個文件都會被單獨編譯。因此，一個文件中所定義的任何變量、mixin 或命名空間都無法在其它文件中訪問。
瀏覽器端設置參數
在 <script src="less.js"></script> 之前 定義全局的 less 對象就可以為 Less.js 設置參數：
<!-- set options before less.js script --> <script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="less.js"></script> 瀏覽器端下載
Less CDN 加速
CDN.
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
本文轉自：http://less.bootcss.com/