LESS即學即用
我們大家都知道HTML和CSS不屬於程式語言而是屬於標記語言，所以很難像JS一樣定義變數、編寫方法、實現模組化開發等。而目前的CSS編寫模式中，都是定義一些公共的樣式類名，哪一塊的HTML需要這個樣式，就去增加對應的樣式類名，所以我們經常看到一個標籤上存在很多樣式類名，在這種模式中我們要時常關注CSS的優先順序，避免樣式的重疊覆蓋...
為了解決CSS的這一困境，CSS預處理預編譯的思想脫穎而出，比較具有代表性的有LESS、SASS、Stylus。它們在傳統的CSS基礎上增加了大量的新的語法，編寫方式，常用的函式等，可以讓我們的CSS像JS一樣成為一門程式語言。本文主要介紹LESS的語法和使用。
一、LESS的編譯
編寫完成的LESS程式碼是不能直接在瀏覽器中執行的，需要編譯成正常的CSS程式碼。那麼我們首先就來學習一下常用的LESS編譯方式。
1.在瀏覽器中呼叫LESS.JS
LESS只支援在現代瀏覽器中執行（最新版本的Chrome, Firefox, Safari 和 IE）。我們不建議在生產環境中使用LESS客戶端，因為在將LESS編譯成CSS的時候，使用者會看到載入延遲的現象，即便在瀏覽器中有不足一秒的載入延遲，但也會降低效能。
首先引入我們設定樣式的LESS檔案， 注意：這裡的rel='stylesheet/less'
<link type="text/css" rel="stylesheet/less" href="1.less"/> 複製程式碼
然後引入less.js檔案
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script> 複製程式碼
瀏覽器中呼叫有個好處:可以開啟監視模式,只要我們的LESS改變，在一定時間內，瀏覽器就會重新的編譯，我們可以看到想要的效果。具體操作如下:
<script charset="utf-8" type="text/javascript">
//->在引入LESS之前設定一個全域性的變數less,配置一些引數值(根據情況自行選擇需要配置的項)
var less = {
//->env:設定執行的環境(生產模式還是開發模式)
//production:編譯後的CSS快取到本地localStorage中
//development:沒有把編譯後的CSS快取到本地,在URL不是標準的格式下(例如:file://...),自動設定為development
env: "development",
//->poll:在監視模式下，每兩次請求之間的時間間隔(ms)
poll:500
}
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
<script charset="utf-8" type="text/javascript">
//->啟用監視模式(env必須要設定成development)
less.watch();
</script>
複製程式碼
。所以一般less做css預處理，很少採用引用less的方式，一般是把less編譯成css之後，引用生成的css檔案。
// index.html檔案 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>less</title> <link type="text/css" rel="stylesheet/less" href="css/styles.less"> </head> <body> <header> <p>Hello World!</p> </header> <script src="./less.min.js" type="text/javascript"></script> </body> </html> 複製程式碼
// styles.less檔案
@blue:#5B83AD;
@size:50px;
header {
color: @blue;
font-size: @size;
}
複製程式碼
如果直接引入less檔案，便會出現如下錯誤：
可以嘗試用一個簡單的web server啟動網站就能解決，譬如lite-server
npm install -g lite-server lite-server //to run 複製程式碼
2、使用NODE命令編譯LESS(單個檔案)
這種方式是目前專案中最常用的方式，適用於專案的生產環境，它是把我們的LESS檔案編譯成CSS檔案，我們專案中直接的引入CSS檔案即可， 基本步驟：安裝->編譯/壓縮編譯->或者使用NODE程式碼實現批量編譯等
把LESS模組安裝到全域性NODE環境中
npm install less -g 複製程式碼
使用命令進行編譯
//->把styles.less檔案編譯成styles.css檔案(如果沒有這個CSS檔案自己會建立) lessc styles.less styles.css //->編譯完成的CSS檔案是經過壓縮的 lessc styles.less styles.min.css -x或者--compress 複製程式碼
經過node命令編譯程式碼前後對比:
// styles.less檔案(編譯前)
@blue:#5B83AD;
@size:50px;
header {
color: @blue;
font-size: @size;
}
複製程式碼
// styles.css檔案(編譯後)
header {
color: #5B83AD;
font-size: 50px;
}
複製程式碼
3、在NODE環境中編寫批量編譯的程式碼
我們在上述用NODE命令編譯的時候，一次只能編譯一個檔案，這樣，如果頁面中有多個LESS，每一次編譯都是比較耗費時間的，所以我們結合NODE的FS檔案讀寫操作，可以寫一套批量編譯的程式碼。
//->定義編譯檔案目錄和目標匯出目錄 var dirPath = "./less/", tarPath = "./css/"; //->匯入NODE中需要使用的模組 var fs = require("fs"), less = require("less"); //->讀取dirPath中的所有檔案,檢查檔案的型別,只有LESS檔案我們才進行儲存 var ary = [], files = fs.readdirSync(dirPath); files.forEach(function (file, index) { /\.(LESS)/i.test(file) ? ary.push(file) : null; }); //->把目錄下的所有檔案進行編譯,把編譯完成的結果儲存在指定的目錄中 ary.forEach(function (file) { var newFile = file.replace(".less", ".css"), conFile = fs.readFileSync(dirPath + file, "utf-8"); less.render(conFile, {compress: true}, function (error, output) { fs.writeFileSync(tarPath + newFile, output.css, "utf-8"); }); }); 複製程式碼
4、使用工具編譯LESS
目前常用的編譯工具有：Koala(據說目前最流行的)、線上編譯( ofollow,noindex">tool.oschina.net/less )、SimpLESS等。本篇文章不做過多的說明。
二、LESS的語法
LESS的基礎語法基本上分為以下幾個方面：變數、混合(Mixins)、巢狀規則、運算、函式、作用域等。
1.變數
和JS中的變數一樣，只是LESS的變數定義不是使用VAR而是使用@。
//->LESS程式碼
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);
a {
color: @link-color;
&:hover {
color: @link-color-hover;
}
}
//->編譯為CSS的結果
a {
color: #428bca;
}
a:hover {
color: #3071a9;
}
複製程式碼
除了上述用變數儲存公用的屬性值，我們還可以用變數儲存公用的URL、選擇器等等
//->LESS程式碼
.@{selector} {
width: 100px;
height: 100px;
@{property}: #000;
background: url("@{bgImg}/test.png");
}
@selector: box;
@bgImg: "../img";
@property: color;
複製程式碼
2.混合(Mixins)
① 基本使用
混合可以將一個定義好的class A輕鬆的引入到另一個class B中，從而簡單實現class B繼承class A中的所有屬性。我們還可以帶引數地呼叫，就像使用函式一樣。
//->LESS程式碼
.public {
width: 100px;
height: 100px;
}
nav ul {
.public;
list-style: none;
}
//->編譯為CSS的結果
.public {
width: 100px;
height: 100px;
}
nav ul {
width: 100px;
height: 100px;
list-style: none;
}
複製程式碼
上述的程式碼，nav ul是把public中設定的樣式屬性值copy了一份到自己的樣式中。如果你想在編譯完成的結果中不輸出public這個樣式的結果，只需要按照下述的程式碼編寫即可：
//->LESS程式碼
.public() {//->在選擇器後面加上()就可以不編譯這個樣式了
width: 100px;
height: 100px;
}
nav ul {
.public;//如果public有子孫元素的樣式，同樣也會被複制過來
list-style: none;
}
//->編譯為CSS的結果
nav ul {
width: 100px;
height: 100px;
list-style: none;
}
複製程式碼
② extend
雖然在上述的案例中，nav ul把public中的樣式繼承了過來，但是原理卻是把程式碼copy一份過來，這樣編譯後的CSS中依然會存留大量的冗餘CSS程式碼，為了避免這一點，我們可以使用extend偽類來實現樣式的繼承使用。 和原來的選擇器共用一套樣式，但要保證原來的選擇器不加括號。
//->LESS程式碼
.public {
width: 100px;
height: 100px;
}
nav ul {
&:extend(.public);
list-style: none;
}
//->編譯為CSS的結果
.public, nav ul {
width: 100px;
height: 100px;
}
nav ul {
list-style: none;
}
複製程式碼
3.巢狀規則
我們可以在一個選擇器中巢狀另一個選擇器來實現繼承，這樣很大程度減少了程式碼量，並且程式碼看起來更加的清晰。
//->LESS程式碼
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
複製程式碼
//->編譯為CSS的結果
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
複製程式碼
4.函式 & 運算
運算提供了加，減，乘，除操作；我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的複雜關係。LESS中的函式一一映射了JavaScript程式碼，如果你願意的話可以操作屬性值。
任何數字、顏色或者變數都可以參與運算. 來看一組例子:
@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; 複製程式碼
LESS 提供了一系列的顏色運算函式. 顏色會先被轉化成 HSL 色彩空間, 然後在通道級別操作:
lighten(@color, 10%);// return a color which is 10% *lighter* than @color darken(@color, 10%);// return a color which is 10% *darker* than @color 複製程式碼
LESS提供了一組方便的數學函式，你可以使用它們處理一些數字型別的值:
round(1.67); // returns `2` ceil(2.4);// returns `3` floor(2.6);// returns `2` 複製程式碼
5.名稱空間和作用域
LESS 中的作用域跟其他程式語言非常類似，首先會從本地查詢變數或者混合模組，如果沒找到的話會去父級作用域中查詢，直到找到為止。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
複製程式碼