快速入門
Less 是一門 CSS 預(yù)處理語言，它擴(kuò)充了 CSS 語言渴庆，增加了諸如變量铃芦、混合（mixin）、函數(shù)等功能襟雷，讓 CSS 更易維護(hù)刃滓、方便制作主題、擴(kuò)充耸弄。
Less 可以運(yùn)行在 Node咧虎、瀏覽器和 Rhino 平臺上。網(wǎng)上有很多第三方工具幫助你編譯 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%) }
}
編譯結(jié)果
.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 在命令行上運(yùn)行砰诵；在瀏覽器上作為腳本文件下載征唬；或者集成在廣大的第三方工具內(nèi)。請參考 用法 茁彭。
安裝
在服務(wù)器端最容易的安裝方式就是通過 npm （node.js 的包管理器）总寒，方法如下：
$ npm install -g less
命令行用法：
安裝 Less 后，就可以在命令行上調(diào)用 Less 編譯器了理肺，如下：
$ lessc styles.less
這將輸出編譯之后的 CSS 代碼到 stdout摄闸，你可以將輸出重定向到一個文件：
$ lessc styles.less > styles.css
若要輸出壓縮過的 CSS，只需添加 -x 選項妹萨。如果希望獲得更好的壓縮效果年枕，還可以通過 --clean-css 選項啟用 Clean CSS 進(jìn)行壓縮。
執(zhí)行 lessc 且不帶任何參數(shù)乎完，就會在命令行上輸出所有可用選項的列表熏兄。
代碼中使用
可以像下面這樣在代碼中調(diào)用 Less 編譯器（Node 平臺）。
var less = require('less');
less.render('.class { width: (1 + 1) }', function (e, css) {
? console.log(css);
});
輸出結(jié)果為：
.class {
? width: 2;
}
你還可以手動調(diào)用分析器（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());
});
配置
可以給編譯器傳遞多個參數(shù)：
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
? });
});
第三方工具
查看 用法 部分了解第三方工具的詳細(xì)信息囱怕。
Rhino 命令行
? ? 每個 less.js 發(fā)布版本同樣包含了 rhino-compatible 版本霍弹。
命令行 rhino 版本需要包含以下兩個文件：
? ? less-rhino-.js - 編譯執(zhí)行,
? ? lessc-rhino-.js - 命令行支持
命令行執(zhí)行編譯：
java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css
以上將編譯 styles.less 文件并保存為 styles.css 文件。 輸出文件的參數(shù)是可選的娃弓，如果沒有指定該參數(shù)典格，less將默認(rèn)輸出到標(biāo)準(zhǔn)輸出中（stdout）。
客戶端用法
? ? 在瀏覽器上跑 less.js 非常方便開發(fā)台丛，但是不推薦用于生產(chǎn)環(huán)境耍缴。
在客戶端使用 Less.js 是最容易的方式，并且在開發(fā)階段很方便挽霉，但是防嗡，在生產(chǎn)環(huán)境中，性能和可靠性非常重要侠坎， 我們建議最好使用 node.js 或其它第三方工具進(jìn)行預(yù)編譯蚁趁。
那就開始吧，在頁面中加入 .less 樣式表的鏈接实胸，并將 rel 屬性設(shè)置為 "stylesheet/less"：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下來他嫡，下載 less.js 并通過 <script></script> 標(biāo)簽將其引入，放置于頁面的<head> 元素內(nèi)：
<script src="less.js" type="text/javascript"></script>
提示
? ? 務(wù)必確保在 less.js 之前加載你的樣式表庐完。
? ? 如果加載多個 .less 樣式表文件钢属，每個文件都會被單獨編譯。因此门躯，一個文件中所定義的任何變量淆党、mixin 或命名空間都無法在其它文件中訪問 。
瀏覽器選項
在 <script src="less.js"></script> 之前 定義全局的 less 對象就可以為 Less.js 設(shè)置參數(shù)：
<!-- 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.js
瀏覽器下載
Download source code
直接從 GitHub 上下載最新的 Less.js 源碼。
Clone or fork via GitHub
通過 GitHub 克隆或 fork 本項目染乌！
通過 Bower 安裝
通過 Bower 安裝 Less.js 項目山孔，可以使用以下命令：
bower install less
Less CDN
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.min.js"></script>
License FAQs
Less.js 基于 Apache 2 許可證發(fā)布（我們打算將來采用雙許可證方式）。版權(quán)所有 2009-2014荷憋，Alexis Sellier 和 Less 核心小組（見上面）饱须。總結(jié)如下：
賦予你的權(quán)力：
? ? 任意下載并使用 Less.js 的全部或部分代碼台谊，可以用于個人、公司內(nèi)部或商業(yè)目的
? ? 將 Less.js 包含到你的產(chǎn)品中
嚴(yán)禁：
? ? 在沒有聲明版權(quán)歸屬的情況下使用 Less.js 中的任何代碼片段
你的義務(wù)：
? ? 如果你的產(chǎn)品中包含 Less.js譬挚，必須包含一份 Less.js 的版權(quán)協(xié)議
? ? 在你包含了 Less.js 的產(chǎn)品中明確聲明 Less.js 的版權(quán)歸 Less 核心小組
不需要：
? ? 在你的產(chǎn)品中包含 Less锅铅。js 自身或你所修改的源碼
? ? 提交你對 Less.js 所做的修改到 Less.js 項目（我們還是鼓勵提交對 Less.js 的改進(jìn)）
完整的 Less.js 版權(quán)信息位于 項目倉庫內(nèi)，請參考减宣。
