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

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

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

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

關(guān)于Less的基本使用，我們需要從嵌套、混合、變量、函數(shù)以及引入這幾個(gè)方面來一一認(rèn)識(shí)。

引用Less，全局安裝

npm install less -g

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

lessc main.less main.css

嵌套
在 css 中父子元素的寫法通常如下：

.container {
    padding: 0;
}
.container .header {
    background-color: red;
}

通過Less 寫法如下，父子嵌套關(guān)系一目了然。也就是下面的代碼編譯就成了上面的css語法。

.container {
    padding: 0;
    .header {
        background-color: red;
    }
}

偽類
偽類的寫法，在 css 中寫法如下：

#header :after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

在less 引入可以用一個(gè)符號(hào) & 代替主類 #header；&就代表了上一層的類名。

#header {
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

變量
也就是說定義一個(gè)公共的變量不用多次重復(fù)編寫相同的代碼；比如將三個(gè)div的背景顏色改成藍(lán)色，我們只需要如下所示：

@background:blue;

less就是js的寫法來寫css

使用@符號(hào)定義變量

@變量名 看成是一個(gè)字符串

變量可以作為樣式屬性值：background-color：@color；

也可以作為類名，我們需要把{ }包起來：如下代碼.@classname 表示的就是 .main。

.@{classname}{
    background-color：@color;
}
@classname:main;
@color:red;

函數(shù)

使用 $ lessc func.less 進(jìn)行轉(zhuǎn)譯 func.css 文件

.border-radius(@radius) {
  -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

轉(zhuǎn)化成了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;
}

函數(shù)的參數(shù)允許設(shè)置默認(rèn)值

.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;
}

函數(shù)有多個(gè)參數(shù)時(shí)用分號(hào)隔開，調(diào)用時(shí)就是通過變量名稱，而不是位置

.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 內(nèi)置函數(shù)（自己本身存在的函數(shù)）
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（單位的轉(zhuǎn)換）

混合

抽取公共類，例如下面的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中我們可以定義一個(gè)公共的樣式名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();
}

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

優(yōu)點(diǎn)：

開發(fā)速度提升

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

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

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

維護(hù)簡(jiǎn)單便捷

功能更多更強(qiáng)

缺點(diǎn)：

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

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

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