摘要：預處理器的技術現在已經很成熟了，而且也出現了各種不同的預處理器語言，但是呢不可能一一列出，面面俱到，這篇文章呢，主要是介紹一下比較常見的預處理器語言之一之初體驗。

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發(fā)者就只要使用這種語言進行編碼工作。

簡單來說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然后再編譯成正常的CSS文件，以供項目使用。
CSS預處理器的技術現在已經很成熟了，而且也出現了各種不同的 CSS 預處理器語言，但是呢不可能一一列出，面面俱到，這篇文章呢，主要是介紹一下比較常見的CSS預處理器語言之一之 Less初體驗。

Alexis Sellier與2009年設計
LESS的第一個版本是用Ruby編寫的，在后來的版本中，它被JavaScript替代了。
Less是一門CSS預處理語言，擴充了 css語言，增加了諸如變量、混合（mixin）、函數等功能，讓 css 更易于維護，方便制作主題。

關于Less的基本使用，我們需要從嵌套、混合、變量、函數以及引入這幾個方面來一一認識。

引用Less，全局安裝

npm install less -g

新建一個index.html文件和main.less，在index.html 中引入main.css，然后輸入下面語句自動編譯成main.css

lessc main.less main.css

嵌套
在 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 內置函數（自己本身存在的函數）
1 escape
2 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%;
     }

3 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();
}

比如新建一個one.less，@import ‘./main.less ’ ；然后編譯一下，我們會發(fā)現編譯出來的。one.css里面就包含了main.less里面的樣式內容。

優(yōu)點：

開發(fā)速度提升

代碼優(yōu)化效率提高（對開發(fā)者而言）

代碼更通俗易懂（對開發(fā)者而言）

代碼更干凈，優(yōu)美

維護簡單便捷

功能更多更強

缺點：

功能上比Sass弱，比如對象、循環(huán)和判斷

生態(tài)環(huán)境略遜于Sass(2006)

需要多一個編譯器來重新編譯一次CSS代碼，也就是給瀏覽器多了一道工序，網頁顯示的速度會減慢