常見的CSS前處理器之Less初體驗
CSS前處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為CSS增加了一些程式設計的特性，將CSS作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。
簡單來說，CSS前處理器用一種專門的程式語言，進行Web頁面樣式設計，然後再編譯成正常的CSS檔案，以供專案使用。
CSS前處理器的技術現在已經很成熟了，而且也出現了各種不同的 CSS 前處理器語言，但是呢不可能一一列出，面面俱到，這篇文章呢，主要是介紹一下比較常見的CSS前處理器語言之一 Less以及個人的一些認識瞭解。
Less
Alexis Sellier與2009年設計 LESS的第一個版本是用Ruby編寫的，在後來的版本中，它被JavaScript替代了。 Less是一門CSS預處理語言，擴充了 css語言，增加了諸如變數、混合（mixin）、函式等功能，讓 css 更易於維護，方便製作主題。
關於Less的基本使用，我們需要從巢狀、混合、變數、函式以及引入這幾個方面來一一認識。
1 Less的安裝使用和編譯：
-
引用Less，全域性安裝
npm install less -g -
新建一個index.html檔案和main.less，在index.html 中引入main.css，然後輸入下面語句自動編譯成main.css
lessc main.less main.css
2 Less 的基本語法
-
巢狀
在 css 中父子元素的寫法通常如下：
.container { padding: 0; } .container .header { background-color: red; }通過Less 寫法如下，父子巢狀關係一目瞭然。也就是下面的程式碼編譯就成了上面的css語法。
.container { padding: 0; .header { background-color: red; } } -
偽類
偽類的寫法，在 css 中寫法如下：
#header :after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; }在less 引入可以用一個符號
&代替主類#header；&就代表了上一層的類名。#header { &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } } -
變數
也就是說定義一個公共的變數不用多次重複編寫相同的程式碼；比如將三個div的背景顏色改成藍色，我們只需要如下所示：
@background:blue;-
less就是js的寫法來寫css
-
使用@符號定義變數
-
@變數名 看成是一個字串
-
變數可以作為樣式屬性值：background-color：@color；
-
也可以作為類名，我們需要把{ }包起來：如下程式碼.@classname 表示的就是 .main。
.@{classname}{ background-color：@color; } @classname:main; @color:red;
-
-
函式
-
使用
$ lessc func.less進行轉譯 func.css 檔案.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .border-radius(4px); } .button { .border-radius(6px); } 轉化成了css如下: #header { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .button { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } -
函式的引數允許設定預設值
.border-radius(@radius: 10px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } #header{ .border-radius(); } .button{ .border-radius(); } 編譯css後的程式碼為： #header { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .button { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } -
函式有多個引數時用分號隔開，呼叫時就是通過變數名稱，而不是位置
.mixin(@radius:10px;@color：green;) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; color:@color; } #header{ .mixin(@color:green); } .button{ .mixin(@color:green); } 編譯成css為： #header{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:green; } .button{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:green; } -
Less 內建函式（自己本身存在的函式）
-
escape
-
percentage（百分比）
.mixin(@radius:10px;@color：green;) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; color:@color; width:percentage(.5); } #header{ .mixin(@color:green); } .button{ .mixin(@color:green); } 編譯成css為： #header{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:green; width:50%;} .button{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:green; width:50%; }
- convert（單位的轉換）
-
-
-
混合
-
抽取公共類，例如下面的css程式碼可以用less這樣編寫
在css中的程式碼：
#header a { color: #111; border-top: solid 1px #595959; border-bottom: solid 2px #595959; } #header span { height: 16px; border-top: solid 1px #595959; border-bottom: solid 2px #595959; } #header p { color: red; border-top: solid 1px #595959; border-bottom: solid 2px #595959; } .borde_style { border-top: solid 1px #595959; border-bottom: solid 2px #595959; }在less中我們可以定義一個公共的樣式名border-style，然後編譯出來的css就是上面的css程式碼：
.borde_style { border-top: solid 1px #595959; border-bottom: solid 2px #595959; } #header a { color: #111; .borde_style; } #header span { height: 16px; .borde_style; } #header p { color: red; .borde_style(); }
-
3 Less的引入
比如新建一個one.less，@import ‘./main.less ’ ；然後編譯一下，我們會發現編譯出來的。one.css裡面就包含了main.less裡面的樣式內容。
4 Less的優勢與劣勢
優點：
- 開發速度提升
- 程式碼優化效率提高（對開發者而言）
- 程式碼更通俗易懂（對開發者而言）
- 程式碼更乾淨，優美
- 維護簡單便捷
- 功能更多更強
缺點：
- 功能上比Sass弱，比如物件、迴圈和判斷
- 生態環境略遜於Sass(2006)
- 需要多一個編譯器來重新編譯一次CSS程式碼，也就是給瀏覽器多了一道工序，網頁顯示的