Less 是 CSS 的一種形式的擴(kuò)展，在現(xiàn)有的 CSS 語(yǔ)法上，添加了很多額外的功能，學(xué)習(xí)Less可以大大提高效率！

1.變量
Less的一個(gè)主要功能是讓你可以像在js中一樣聲明變量，你可以將公用的值存儲(chǔ)在變量中(請(qǐng)注意Less中的變量為常量，只能定義一次)

@backgorud:#fff;
@font-color:#000;

div{
  background:@backgorud;
  color:font-color;
}

解析如下所示

div{
   background:#fff;
   colo:#000;
}

2.混入
在Less中我們可以定義通用的樣式為一個(gè)class或者id集合，然后在其它的地方去調(diào)用它們

.header{
  font-size:16px;
  color:#fff;
}
#footer{
  background:red;
  display:flex
}
.context{
  height:100px;
  .header
  #footer
}

解析如下所示

.header{
  font-size:16px;
  color:#fff;
}
#footer{
  background:red;
  display:flex
}
.context{
  height:100px;
  font-size:16px;
  color:#fff;
  background:red;
  display:flex
}

3.帶參數(shù)混合

.item(@size:20px){
  height:@size;
  width:@size;
}
.list-one{
  .item
}
.list-two{
  .item(100px)
}

解析如下所示

.list-one{
  height:20px;
  width:20px;
}
.list-two{
  height:100px;
  width:100px;
}

與js中一樣，函數(shù)中也存在arguments，用@arguments表示，表示參數(shù)集合

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000){
  box-shadow: @arguments;
}
.box-shadow(10px, 15px);

解析如下所示

box-shadow: 10px 15px 1px #000;

4.模式匹配和導(dǎo)引表達(dá)式

.set-attribute(height,@size){
  height:@size;
}
.set-attribute(width,@size){
  width:@size;
}
.set-attribute(@_,@size){
  background:red;
}

運(yùn)行

@switch:height;
.div1{
  .set-attribute(height,100px);
}

解析如下所示

.div{
  height:100px;
  background:red;
 }

只有被匹配的混合才會(huì)被使用。變量可以匹配任意的傳入值，而變量以外的固定值就僅僅匹配與其相等的傳入值。

也可以進(jìn)行多個(gè)參數(shù)的匹配

.set-attribute(@color){
  color:@color;
}
.set-attribute(@color,@size){
  height:@size;
  color:@color;
}

5.嵌套

#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

解析如下所示

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

注意 & 符號(hào)的使用—如果你想寫(xiě)串聯(lián)選擇器，而不是寫(xiě)后代選擇器，就可以用到&了. 這點(diǎn)對(duì)偽類(lèi)尤其有用如 :hover 和 :focus.

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

輸出

.bordered.float { //串聯(lián)選擇器，作用在同一個(gè)元素
  float: left;  
}
.bordered .top {// 后代選擇器 ，
  margin: 5px;
}

6.運(yùn)算
Less可以進(jìn)行運(yùn)算,并且可以區(qū)分單位

@size:5px;
div{
  width:@size + 1;
  height:(@size * 2) +1;
}
//輸出
div{
  width:6px;
  height:11px;
}

更多Less特性請(qǐng)參閱 官方文檔