首先安裝vue-cli，網站教程多多，在這不多說。

接下來在vue專案目錄下，執行

其他擴充套件使用方法我放個官網連結，大家可以點選檢視

npm install less less-loader --save-dev

等待安裝成功即可，接下里我們可以在vue專案中的package.json中看到less的相關依賴

接下來找到bulid目錄下的webpack.base.conf.js並開啟，找到module下的rules寫下

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}
 

如果沒有module和rules就可以自己加上（一般都是有的，沒有說明你可以安裝錯誤vue-cli或者找錯檔案）

module: {
        rules: [
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
        ]
    },

以上步驟全部走完，接下來，我們可以開啟元件檔案在下面style標籤裡面寫上lang="less"表示以less語法解析css，大家接下來可以跟著我學習完less基礎語法進行實驗

less語法介紹

介紹less是什麼

Less是一門css預處理語言，它擴充套件了css語言，革命了css，增加了變數、mixin、函式等特性、使得css更加易於維護和擴充套件。Less的好處和優點，接下來我會用程式碼實現。

語法

變數

（1）在less裡面，我們在寫樣式的時候，需要給元素加上背景顏色。考慮到以後會修改主題樣式，我們就可以使用變數來很方便的修改background-color。

@tabBar-red-style:#f00
#tabBar{
    background:@tabBar-red-style
}

在頁面上id為tabBar的元素的背景就會被顯示為#f00，會被正常的渲染出來，以後倘若變態的產品經理想要全域性改變顏色風格，就可以只改變移除變數即可全域性修改。

（2）變數還可以使用變數名定義變數，例如

@message: "this is a string";
@text: 'message';
content: @@text;

在content這個屬性後面就是this is a string這個內容

混合

我們通常在寫css的時候會重複寫好多同樣的類，比如text-align：center，margin：0 auto，之類的css，現在我們可以定義一個class然後在其他class裡面去呼叫，例如

.col-row-center{
    dispaly:flex;
    align-items:center;
    justify-content:center;
}
.message{
    .col-row-center
}
//等同於
.message{
    dispaly:flex;
    align-items:center;
    justify-content:center;
}

同樣可以被解析成功，比如解決浮動父元素高度丟失，一個元素的水平垂直居中都可以用一個公共的class來引用。

攜帶引數的混合使用

混合如果只能這麼單一的使用實在是簡單，在混合裡面我們可以像函式一樣攜帶引數傳值使用，例如

（1）帶一個引數

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#tabBar{
  .border-radius(4px);//使用時可以在括號內寫入想要的值
}
.card{
  .border-radius(6px);  
}

（2）給引數設定預設值

.border-radius (@radius:4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#tabBar{
  .border-radius();//此時不傳值也會有預設值傳入
}
.card{
  .border-radius();  
}

（3）不寫引數防止隱藏css

.border-radius () {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
#tabBar{
  .border-radius();//此時不傳值在解析過程中，.border-radius類不會出現在css檔案之中，節省css空間
}
.card{
  .border-radius();  
}

（4）@arguments大量傳參，節省操作

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

模式匹配

根據傳入的引數來改變混合的預設呈現，例如

//讓.mixin根據不同的@switch值而表現各異
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

//執行
@switch: light;

.class {
  .mixin(@switch, #888);
}

上面程式碼意思是使用.mixin時，@switch位置上的值是dark那就應用第一個.mixin，如果是light那就應用第二哥.mixin，第三個@_是接受一切值得配對，第三個可以一直被使用。css檔案中看到的內容應該就是

.class {
   color: #a2a2a2;
   display: block;
}

引導表示式

（1）根據表示式進行匹配，而非根據值和引數匹配

//when關鍵字用以定義一個導引序列(此例只有一個導引)
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

//執行
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

這裡面就會進行一些列的運算對比從而選擇正確的類

（2）導引中可用的全部比較運算有： > >= = =< <。此外，關鍵字true只表示布林真值，除去關鍵字true以外的值都被視示布林假

.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

（3）導引序列使用逗號‘,’—分割，當且僅當所有條件都符合時，才會被視為匹配成功

.mixin (@a) when (@a > 10), (@a < -10) { ... }

（4）導引可以無引數，也可以對引數進行比較運算

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

巢狀規則

巢狀的寫法會讓css看起來非常有層次感，易於瀏覽器解析

（1）以巢狀的方式編寫層疊樣式

css的寫法

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

less的寫法

#header {
  color: black;

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

（2）&符號用於寫串聯選擇器，而不是寫後代選擇器。這點對偽類尤其有用，如:hover和:focus

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

解析出來如下

.bordered.float {//中間沒有空格
  float: left;  
}
.bordered .top {//中間有空格
  margin: 5px;
}

運算

less中的運算也會非常實用

（1）任何數字、顏色或者變數都可以參與運算

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

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

（2）less運算能夠分辨出顏色和單位

@var: 1px + 5;  //less會輸出6px

//括號也同樣允許使用
width: (@var + 5) * 2;

//可以在複合屬性中進行運算
border: (@width * 2) solid black;

Color 函式

（1）less提供了一系列的顏色運算函式. 顏色會先被轉化成 HSL色彩空間, 然後在通道級別操作

lighten(@color, 10%);     // 返回一個比@color低10％更輕的顏色

darken(@color, 10%);      // 返回一個比@color高10％較暗的顏色

saturate(@color, 10%);    // 返回比@color多飽和度10％的顏色
desaturate(@color, 10%);  // 返回一個比@color少飽和度10％的顏色

fadein(@color, 10%);      // 返回一個比@color少10％透明度的顏色
fadeout(@color, 10%);     // 返回一個比@color多10％透明度的顏色
fade(@color, 50%);        // 返回一個顏色透明度為50％的顏色

spin(@color, 10);         // 返回色調比@color大10度的顏色

spin(@color, -10);        // 返回一個比@color小10度色調的顏色

mix(@color1, @color2);    // 返回一個混合@ color1和@ color2的顏色

Math函式

less提供的數學函式可以方便的為一些需求提供便利

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
percentage(0.5); // returns `50%`

作用域

和js的作用域相同，會在當前作用域下查詢變數，如果沒有，會到上級父元素茶找

@var: red;

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

#footer {
  color: @var; // red  
}

註釋

less裡面的註釋沿用了css的舒適，包括js的註釋也可以使用

/* Hello, I'm a CSS-style comment */
.class { 
    color: black 
}

// Hi, I'm a silent comment, I won't show up in your CSS
.class { 
    color: white 
}

import

當你擁有一個common.less裡面儲存著大量複用class，可以使用import來引入檔案使用

@import "lib.less";
@import "lib";

字串插值

變數可以用類似js模板字串方式嵌入到字串中

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

避免編譯

有時候我們需要輸出一些不正確的CSS語法或者使用一些 less不認識的專有語法。要輸出這樣的值我們可以在字串前加上一個 ~，並將要避免編譯的值用 “”包含起來

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

javascript表示式

（1）JavaScript 表示式也可以在.less 檔案中使用.，可以通過反引號的方式使用

@var: `"hello".toUpperCase() + '!'`;    //@var: "HELLO!";

（2）也可以同時使用字串插值和避免編譯

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`; //@var: HELLO!;

（3）也可以訪問JavaScript環境

@height: `document.body.clientHeight`;

（4）將一個JavaScript字串解析成16進位制的顏色值，可以使用 color 函式

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

本人也只是從官網和boot網站學習和摘錄，供自己記憶加深方便以後查閱。如有不全及錯誤，請自行查閱和評論通知修改