css是不能夠定義變量的，也不能嵌套。它沒有編程語言的特性。在項目開發中，常常發現有很多css代碼是相同的，但我們通常都是復制然後粘貼。

舉個例子：假設h5應用裏主題色是#FF3A6D，可能用於文字或者背景色。通常開發中，哪裏需要這個顏色，我們就復制這個顏色並粘貼。下次要修改就得全部查找批量替換，其實不是很方便。

本文即將介紹的less將讓我們更快更方便的編寫css代碼。

Less是什麽

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便制作主題、擴充。

less使用.less作為文件後綴。通過第三方工具，可以一鍵或者實時編譯成對應的css文件。

示例：
demo.less

 @base: #f938ab;/*定義變量*/
.box {
  color: @base;
  border-color: lighten(@base, 30%); /*使用函數*/
  /*嵌套*/
  &-content{
    width:100%;
  }
  .title{
    color:#ccc;
  }
}

通過第三方工具，編譯後生成：
demo.css

.box {
  color: #f938ab;
  border-color: #fdcdea;
}
.box-content {
  width: 100%;
}
.box .title {
  color: #ccc;
}
 

實際項目中，我們編輯的是.less文件，但引用時依舊像往常一樣引用.css文件。通過第三方工具（例如Koala），可以實現.less文件一發生改變，就生成同名的.css文件。

語言特性

由於less文件本身就是文本，所以不用特別安裝什麽編輯器，通常的代碼編輯器都能進行編輯。推薦使用sublime text（建議安裝插件Less，以支持less語法高亮）。

變量

使用@符號定義。例如：

@base: #f938ab;
.box {
    color: @base; /*變量引用*/
}

變量的作用就是把值定義在一個地方（或一個文件裏，通過@import導入），然後在各處使用，這樣能讓代碼更易維護。

變量也支持URLs：

// Variables
@images: "../img";

// 用法
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

屬性也支持變量的形式：

@property: color;

.widget {
  @{property}: #0ee;
  [email protected]{property}: #999;
}

混合（Mixin）

混合就是前面定義的一個樣式，後文可以直接引用。示例：

@base: #f938ab;
.ellipsis_txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.box {
    color: @base;
    .ellipsis_txt;
    /*或者
    .ellipsis_txt();
    */
}

括號是可選的。

嵌套

可以在一個css裏有多個css塊，以方便我們更好的組織代碼，編寫css模板。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

生成：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

還支持&符號：

#header {
  color: black;
  &-navigation {
    font-size: 12px;
  }
  &-logo {
    width: 300px;
  }
  &:hover{
    color:#ccc;
  }
}

生成：

#header {
  color: black;
}
#header-navigation {
  font-size: 12px;
}
#header-logo {
  width: 300px;
}
#header:hover {
  color: #ccc;
}

運算

任何數字、顏色或者變量都可以參與運算。下面是一組案例：

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

示例：

@var: 1px + 5;
div{
    width:@var;
}

輸出：

div {
  width: 6px;
}

函數

Less 內置了多種函數用於轉換顏色、處理字符串、算術運算等。這些函數在函數手冊中有詳細介紹。

函數的用法非常簡單。下面這個例子將介紹如何將 0.5 轉換為 50%，將顏色飽和度增加 5%，以及顏色亮度降低 25% 並且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

編譯生成：

.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

命名空間

有時候，你可能為了更好組織 CSS 或者單純是為了更好的封裝，將一些變量或者混合模塊打包起來，一些屬性集之後可以重復使用。
示例：

/*模塊*/
#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { /**/ }
  .citation { /**/ }
}

/*下面復用上面的一部分代碼*/
#header a {
  color: orange;
  #bundle > .button;
}

編譯生成：

#bundle .button {
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#bundle .button:hover {
  background-color: white;
}
#bundle .tab {
  /**/
}
#bundle .citation {
  /**/
}

/*下面復用上面的一部分代碼*/
#header a {
  color: orange;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: white;
}

LESS中的命名空間，屬於高級語法，在日常項目中應用比較廣泛。我們可以用LESS中的命名空間為自己封裝一些日常比較常用的類名，以便以後做項目的時候更有效率。

作用域

子類裏面的優先，找不到才往父類裏找。

示例：

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // 這裏值是white
  }
}

也不會因為變量後面定義而影響作用域：

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

和上面的例子是一樣的。

註釋

css僅支持塊註釋。less裏塊註釋和行註釋都可以使用：

/* 一個註釋塊
style comment! */
@var: red;

// 這一行被註釋掉了！
@var: white;

導入

和css一樣，你可以導入一個 .less 文件，此文件中的所有變量就可以全部使用了。如果導入的文件是 .less擴展名，則可以將擴展名省略掉：

@import "library"; // library.less
@import "typo.css";

函數參考

color(string) 解析顏色,將代表顏色的字符串轉換為顏色值
convert(value,unit) 將數字從一種單位轉換到另一種單位.第一個參數為帶單位的數值,第二個參數為單位.
ceil(number)向上取整
floor(number)向下取整
percentage(number)將浮點數轉換為百分比字符串
round(number)四舍五入取整
sqrt(number)計算一個數的平方根,並原樣保持單位
pow(number,number)設第一個參數為A,第二個參數為B,返回A的B次方.
mod(number,number)返回第一個參數對第二參數取余的結果.
min(value1, ..., valueN)返回一系列值中最小的那個.
max(value1, ..., valueN)返回一系列值中最大的那個.
abs(number)計算數字的絕對值,並原樣保持單位
sin(number)正弦函數
cos(number)余弦函數
asin(number)反正弦函數.返回以弧度為單位的角度,區間在 -PI/2 到 PI/2之間.
acos(number)反余弦函數.區間在 0 到 PI之間.
tan(number)正切函數
atan(number)反正切函數
pi()返回圓周率 π (pi)
isnumber(value)如果待驗證的值為數字則返回 true,否則返回 false
isstring(value)如果待驗證的值是字符串則返回 true,否則返回 false
iscolor(value)如果待驗證的值為顏色則返回 true,否則返回 false

Less:優雅的寫CSS代碼