簡介
Less 是一個 CSS 預處理器，讓 CSS 具有動態性。
CSS 中可以使用 Bootstrap 的 Less 變量、混合（mixins）和嵌套（ nesting）。
獲取 Less CSS:
Less 官網：http://lesscss.org/
Bootstrap 混合
基本的混合
基本的混合從本質上來說，就是包括整個或是部分代碼片段。寫法類似一個CSS類，可以隨處調用。
.element {
.clearfix();
}
帶參數的混合
帶參數的混合和基本混合很像，不同之處是前者可以接收參數(根據名稱)，參數可以有默認值。
.element {
.border-radius(4px);
}
包含混合
實用工具
| 混合 | 參數 | 用法 |
|---|---|---|
.clearfix() |
無 | 清除浮動 |
.tab-focus() |
無 | 添加類似Webkit獲得焦點的風格和類似Firefox的的外包線 |
.center-block() |
無 | 使用margin: auto把塊級元素自動居中 |
.ie7-inline-block() |
無 | 添加規則的 display: inline-block 以支持IE7 |
.size() |
@height: 5px, @width: 5px |
快速設置行高和行寬 |
.square() |
@size: 5px |
基於.size() 設置正方形區域 |
.opacity() |
@opacity: 100 |
設置透明度的百分比 (比如 "50" 或 "75") |
如何編譯
帶有makefile的Node.js
運行下列命令，利用npm在全局環境下安裝LESS命令行編譯器和uglify-js：
$ npm install -g less uglify-js
使用 JavaScript
只需要簡單的引用 less.js 文件(下載最新的 Less.js )並重新加載頁面。
js 文件就會編譯 less。
<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>
命令行
如果您已經安裝了 Less 命令行（Command Line），原型下面要編譯的命令：
$ lessc ./lib/bootstrap.less > bootstrap.css