首先安裝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網站學習和摘錄，供自己記憶加深方便以后查閱。如有不全及錯誤，請自行查閱和評論通知修改