什麼是Less？

Less其實就是css前處理器，簡單的說，就是動態編寫css。

Less用法

首先以vue中開發為例，先安裝less和less-loader

npm install less less-loader

1.變數

1.變數值定義

格式： @變數名

  @width:100px;
  .hello{
    width: @width;
  }

最終輸出:

 .hello{
    width:100px;
  }

2.屬性變數定義

格式：@{變數名}

  @color:color;
  .hello{
    @{color
 
}:blue;
  }

最終輸出:

.hello{
    color:blue;
  }

3.屬性部件變數定義

格式：@{變數名}

  @color:color;
  .hello{
    background-@{color}: red;
  }

最終輸出:

 .hello{
    background-color: red;
  }

4.選擇器定義

格式：@{變數名}

  @dialog:.dialog;
  @{dialog}{
     width:80px;
     height:80px;
     background: green;
  }
 

最終輸出：

.dialog{
    width: 80px;
    height: 80px;
    background: green;
}

5.選擇器部件定義

格式：@{變數名}

  @fix:fix;
  [email protected]{fix}{
    color:gold;
  }

最終輸出：

.d-fix{
    color: gold;
}

2.混合（Mixins）

less中允許將已有的class或者id運用在不同的選擇器上

1.不帶引數

 .border{
    border:2px solid blue;
  }
  .hello
 
{
    .border;
  }

最終輸出：

.hello{
    border: 2px solid blue;
}

2.可帶引數

 .border(@border-wdith){
    border:@border-wdith solid palegreen;
  }
  .hello{
    .border(20px);
  }

最終輸出：

.hello{
    border: 20px solid palegreen;
}

3.預設帶值

  .border(@border-width:10px){
    border:@border-width solid blue;
  }
  .hello{
    .border();
  }

最終輸出：

.hello{
    border: 10px solid blue;
}

如果不想要預設值，可以.border(引數值)

3.匹配模式

 .pos(r){
    position: relative;
  }
  .pos(a){
    position: absolute;
  }
  .pos(f){
    position: fixed;
  }
  .hello{
    .pos(f);
  }

最終輸出：

.hello{
    position: fixed;
}

若：

.pos(@_){
    width:100px;
}

最終輸出：

.hello{
    width:100px;
    position: fixed;
}

@_表示所有的.pos都必須帶上裡面的屬性

4.運算

 @width:20px;
  .hello{
    width: @width*2+10;
  }

最終輸出：

.hello{
    width: 50px;
}

5.巢狀

 .list{
    li{
      width:100px;
    }
  }

最終輸出：

.list li{
    width: 100px;
}

less中懸浮：

  .list{
    &:hover{
      background: red;
    }
  }

最終輸出：

  .list:hover{
      background: red;
  }

注意：&在less中是表示上一層選擇器的意思

6.argument變數

  .border(@border-width:3px,@x:solid,@c:black){
     border:@arguments;
  }
  .box{
    .border();
  }

最終輸出：

.box{
    border: 3px solid black;
}

@arguments就是表示（）中所有引數值

7.轉義

格式：~”” 或者 ~”

  @min768: ~"(min-width: 768px)";
  .hello {
    @media @min768 {
      font-size: 20px;
    }
  }

最終輸出：

@media (min-width: 768px){
    .hello{
    font-size: 20px;
}
}

當less無法識別某個字串的時候，就得用轉義，防止編譯錯誤

8.函式

less內建了很多用於轉換顏色、處理字串等函式，具體見官網地址：http://lesscss.cn/functions/

9.when條件判斷

  .mixin (@flag) when (@flag){
    font-weight: bold;
  }
  .hello{
    .mixin(true);
  }

最終輸出：

  .hello{
     font-weight: bold;
  }

當@flag為真的時候，就呼叫