Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便制作主題、擴充。
Less 可以運行在 Node、瀏覽器和 Rhino 平臺上。網上有很多第三方工具幫助你編譯 Less 源碼。
官網地址
less手冊
bootstrap官網less介紹
一、瀏覽器端環境搭建
github下載地址：https://github.com/less/less.js
1、js引入
搭建Less的學習環境非常簡單，只需在</body>標簽前通過<script type="text/javascript" src="less.js"></script>引入處理器即可實現瀏覽器端中將less預編譯為css樣式。
更有效的方式是通過如下代碼監測less樣式，自動編譯為css樣式，從而減少我們修改less代碼后需按F5后才看到實際效果的繁瑣步驟。
<script>less = { env: 'development'};</script><script src="less.js"></script><script>less.watch();</script>Note:注意你的less樣式文件一定要在引入less.js前先引入。
2、less的css樣式處理
less內聯樣式和外聯樣式
基于我們現在使用的是瀏覽器端進行預編譯，因此Less可用于內聯樣式和外聯樣式當中。
內聯樣式如下：
<style type="text/less"> // less 代碼</style>
外聯樣式引入如下：
Note:注意rel的值是stylesheet/less
<link rel="stylesheet/less" type="text/css" href="文件.less" rel="external nofollow" />
二、語法
1、注釋
// 單行注釋，不會作為最終輸出/* 多行注釋，以原生CSS的/*注釋....*/形式作為最終輸出*/
2、變量
Less中的變量有以下規則：
以@作為變量的起始標識，變量名由字母、數字、_和-組成
沒有先定義后使用的規定；
以最后定義的值為最終值；
可用于rule值、rule屬性、rule屬性部件、選擇器、選擇器部件、字符串拼接；
定義時 "@變量名: 變量值;" 的形式；引用時采用 "@變量名" 或 "@{變量名}" 的形式；
存在作用域，局部作用域優先級高于全局作用域。
Note:注意直接拷貝網頁中代碼可能因為一些空白符的原因導致編譯出錯。
less源碼
@color: color; @dialog: .dialog; @suffix: fix; // 空格將被忽略，若要保留空格則需要使用單引號或雙引號 @hi: 'hello '; @dear: there ; .dialog{ // 用于 rule屬性部件，必須使用"@{變量名}" 的形式 background-@{color}: #888; // 用于 rule屬性，必須使用"@{變量名}" 的形式 @{color}: blue; } // 用于 選擇器，必須使用"@{變量名}" 的形式 @{dialog}{ width: 200px; } @{dialog}::after{ content: ': @{hi}@{dear}!'; // 用于 字符串拼接，必須使用"@{變量名}" 的形式 } @h: 1000px; // 用于 選擇器部件，必須使用"@{變量名}" 的形式 .ie-@{suffix}{ @h: 30px; // 存在作用域，局部作用域優先級高于全局作用域。 height: @h; // 用于 屬性值，兩種形式均可使用 line-height: 30px; } // 1. 以@作為變量的起始標識，變量名由字母、數字、_和-組成 // 2. 沒有先定義后使用的規定； @dialog-border-color: #666; @dialog-border-width: 10px; @dialog-border-width: 1px; // 3. 以最后定義的值為最終值；最終輸出：
.dialog { background-color: #888; color: blue;}.dialog { width: 200px;}.dialog::after { content: ': hello there!';}.ie-fix { height: 30px; line-height: 30px;}三、gulp編譯less
1、安裝
全局安裝：npm install -g less
項目內安裝：npm install gulp-less --save-dev
2、使用
var gulp=require("gulp");var less=require("gulp-less");gulp.task("less",function(){gulp.src('src/css/*.less').pipe(less()).pipe(gulp.dest("src/css"));});//監視文件的變化gulp.task("watch",function(){gulp.watch("src/css/*.less",['less']);});新聞熱點
疑難解答
