Vue-cli中怎么安裝并使用Less？安裝并使用less經(jīng)驗分享！

}今天小編來和大家說說有關(guān)于“Vue-cli中怎么安裝并使用Less？”這個問題吧！下面是小編分享的相關(guān)內(nèi)容，希望對大家有所幫助！

我們可以在網(wǎng)絡(luò)上找到很多有關(guān)于?less?安裝的相關(guān)資料也是比較簡單的我們下載完成之后在vue項目中運行我們輸入下面這串代碼進行安裝在?vue?中：

npm install less less-loader --save-dev

我們可以在?vue?項目中的?package.json?中看到?less?的相關(guān)依賴，截圖如下：

接下來我們找到build目錄下的?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=“l(fā)ess”?從而表示以less語法解析?css?，下面我們就可以進行?less?的實操。

首先我們要知道什么是less才知道怎么去使用它！對于什么是less的話，它是一門css預(yù)處理語言，擴展lcss語言、增加變量、mixin、函數(shù)等特性、使得css更加易于維護和擴展。

1、語法變量

(1)、在less中，我們在寫樣式的時候需要給我們的元素加上背景顏色，在考慮之后我們會修改主題樣式中我們可以使用下面這種方法：

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

我們在頁面上id為tabBar的元素的背景就會被顯示為#f00，會被正常的渲染出來，以后倘若變態(tài)的產(chǎn)品經(jīng)理想要全局改變顏色風格，就可以只改變移除變量即可全局修改。

(2)、變量通過變量名來定義：

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

在content這個屬性后面就是this is a string這個內(nèi)容。

(3)、通常我們在寫css樣式的時候會重復(fù)的寫同樣的類，其實我們可以這么做，代碼如下：

.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?類然后在其他的?class?中進行調(diào)用。這樣我們還可以解決浮動?父元素?的高度丟失問題。

2、面對攜帶參數(shù)時的混合使用方法：

(1)、帶一個參數(shù)的時候代碼如下：

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

(2)、給參數(shù)設(shè)定默認值代碼如下：

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

(3)、不寫參數(shù)防止隱藏css代碼如下：

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

(4)、?@arguments?大量傳參，節(jié)省操作代碼如下：

.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);

3、模式匹配

我們通過根據(jù)傳入的參數(shù)來改變混合的默認呈現(xiàn)，代碼如下：

//讓.mixin根據(jù)不同的@switch值而表現(xiàn)各異
.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?那就應(yīng)用第一個?.mixin?，如果是?light?那就應(yīng)用第二個?.mixin?，第三個?@_?是接受一切值得配對，第三個可以一直被使用。

那么我們在css文件中看到的內(nèi)容應(yīng)該就是下面這些代碼：

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

4、引導表達式

(1)、我們通過根據(jù)表達式進行匹配，代碼如下：

//when關(guān)鍵字用以定義一個導引序列(此例只有一個導引)
.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)、我們通用導引中可用的全部比較運算有：? > >= = =< <?。除此之外關(guān)鍵字?true?只表示布爾真值，除去關(guān)鍵字?true?以外的值都被視示布爾假值，代碼如下：

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

(3)、導引序列使用逗號?‘,’?—分割，當且僅當所有條件都符合時，才會被視為匹配成功，如下代碼：

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

(4)、導引可以無參數(shù)，也可以對參數(shù)進行比較運算，代碼如下：

@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 }

5、嵌套規(guī)則

嵌套的寫法會讓css看起來非常有層次感，易于瀏覽器解析

(1)、以嵌套的方式編寫層疊樣式，下面是相關(guān)的css的寫法：

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

less代碼寫法：（2）&符號用于寫串聯(lián)選擇器，而不是寫后代選擇器。這點對偽類尤其有用，如:hover和:focus

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

(2)、通過&符號用于寫串聯(lián)選擇器，而不是寫后代選擇器。這點對偽類尤其有用，如:hover和:focus，代碼如下：

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

解析之后是這樣的：

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

6、運算

(1)、任何數(shù)字、顏色或者變量都可以參與運算，代碼案例如下：

@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;
//可以在復(fù)合屬性中進行運算
border: (@width * 2) solid black;

7、color函數(shù)

(1)、我們在less中可以知道它提供了一系列的顏色運算函數(shù)，如下所示：

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);         // 返回色調(diào)比@color大10度的顏色
spin(@color, -10);        // 返回一個比@color小10度色調(diào)的顏色
mix(@color1, @color2);    // 返回一個混合@ color1和@ color2的顏色

8、math函數(shù)

在這個函數(shù)中l(wèi)ess提供了很多大便利：

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

9、作用域

對于作用域的話其實和js的作用域是相同的，會在當前作用域下面查找我們的變量，如果沒有找到的話它會到上一級父元素中查找，如下所示：

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

10、注釋方法

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 
}

11、import方式

下面是我們的先關(guān)?import?的案例：

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

12、字符串插值

我們的變量可以用類似?js?模板的字符串嵌入我們的字符中，如下所示：

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

我們有時候在輸入錯誤的?css?的時候或者使用一些?less?不認識的語法我們在輸出這樣的值我們可以在字符串前面加上?“~”?這個符號，從而避免編譯的值用“”這個符號包含起來，如下所示：

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

(1)、JavaScript的表達式可以在 .less文件中進行使用，我們可以通過反引導的方式進行使用，如下所示：

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

(2)、我們也可以同時使用字符串插值和避免編譯，如下所示:

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

(3)、也可以訪問我們的JavaScript環(huán)境，如下所示：

@height: `document.body.clientHeight`;

(4)、我們還可以使用color函數(shù)來將JavaScript字符串解析成16進制的顏色值，代碼如下：

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

以上就是有關(guān)于“Vue-cli中怎么安裝并使用Less？”這個問題的相關(guān)內(nèi)容，如果你有其他的想法也可以和大家一起分享探討，更多的有關(guān)vue的相關(guān)內(nèi)容和知識我們都可以在W3cschool中進行學習和了解。

相關(guān)資料：

less使用方法鏈接：http://lesscss.cn/#using-less