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>
