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

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

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

npm install less less-loader --save-dev

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

接下來(lái)我們找到build目錄下的?webpack.base.conf.js?文件然后打開找到module?下的?rules?寫入下面這些代碼：

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

如果沒(méi)有的?module?和?rules?我們就可以自己加上，但是一般都是有的如果沒(méi)有的話，說(shuō)明可能安裝錯(cuò)誤的?vue-cli?或者找錯(cuò)文件了。

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

等我們這些步驟都完成之后我們就可以在組件文件下面的style標(biāo)簽上面寫上?lang=“l(fā)ess”?從而表示以less語(yǔ)法解析?css?，下面我們就可以進(jìn)行?less?的實(shí)操。

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

1、語(yǔ)法變量

(1)、在less中，我們?cè)趯憳邮降臅r(shí)候需要給我們的元素加上背景顏色，在考慮之后我們會(huì)修改主題樣式中我們可以使用下面這種方法：

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

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

(2)、變量通過(guò)變量名來(lái)定義：

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

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

(3)、通常我們?cè)趯慶ss樣式的時(shí)候會(huì)重復(fù)的寫同樣的類，其實(shí)我們可以這么做，代碼如下：

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

我們通過(guò)定義一個(gè)?class?類然后在其他的?class?中進(jìn)行調(diào)用。這樣我們還可以解決浮動(dòng)?父元素?的高度丟失問(wèn)題。

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

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

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

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

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

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

.border-radius () {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
#tabBar{
  .border-radius();//此時(shí)不傳值在解析過(guò)程中，.border-radius類不會(huì)出現(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、模式匹配

我們通過(guò)根據(jù)傳入的參數(shù)來(lái)改變混合的默認(rèn)呈現(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;
}
//運(yùn)行
@switch: light;
 
.class {
  .mixin(@switch, #888);
}

在我們的代碼中的意思是我們?cè)谑褂?.mixin?的時(shí)候，當(dāng)?@switch?位置上的值是?dark?那就應(yīng)用第一個(gè)?.mixin?，如果是?light?那就應(yīng)用第二個(gè)?.mixin?，第三個(gè)?@_?是接受一切值得配對(duì)，第三個(gè)可以一直被使用。

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

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

4、引導(dǎo)表達(dá)式

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

//when關(guān)鍵字用以定義一個(gè)導(dǎo)引序列(此例只有一個(gè)導(dǎo)引)
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
 
//運(yùn)行
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

(2)、我們通用導(dǎo)引中可用的全部比較運(yùn)算有：? > >= = =< <?。除此之外關(guān)鍵字?true?只表示布爾真值，除去關(guān)鍵字?true?以外的值都被視示布爾假值，代碼如下：

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

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

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

(4)、導(dǎo)引可以無(wú)參數(shù)，也可以對(duì)參數(shù)進(jìn)行比較運(yùn)算，代碼如下：

@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ī)則

嵌套的寫法會(huì)讓css看起來(lái)非常有層次感，易于瀏覽器解析

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

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

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

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

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

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

解析之后是這樣的：

.bordered.float {//中間沒(méi)有空格
  float: left;  
}
.bordered .top {//中間有空格
  margin: 5px;
}

6、運(yùn)算

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

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

(2)、less運(yùn)算能夠分辨出顏色和單位，代碼如下：

@var: 1px + 5;  //less會(huì)輸出6px
//括號(hào)也同樣允許使用
width: (@var + 5) * 2;
//可以在復(fù)合屬性中進(jìn)行運(yùn)算
border: (@width * 2) solid black;

7、color函數(shù)

(1)、我們?cè)趌ess中可以知道它提供了一系列的顏色運(yùn)算函數(shù)，如下所示：

lighten(@color, 10%);     // 返回一個(gè)比@color低10％更輕的顏色
darken(@color, 10%);      // 返回一個(gè)比@color高10％較暗的顏色
saturate(@color, 10%);    // 返回比@color多飽和度10％的顏色
desaturate(@color, 10%);  // 返回一個(gè)比@color少飽和度10％的顏色
fadein(@color, 10%);      // 返回一個(gè)比@color少10％透明度的顏色
fadeout(@color, 10%);     // 返回一個(gè)比@color多10％透明度的顏色
fade(@color, 50%);        // 返回一個(gè)顏色透明度為50％的顏色
spin(@color, 10);         // 返回色調(diào)比@color大10度的顏色
spin(@color, -10);        // 返回一個(gè)比@color小10度色調(diào)的顏色
mix(@color1, @color2);    // 返回一個(gè)混合@ color1和@ color2的顏色

8、math函數(shù)

在這個(gè)函數(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、作用域

對(duì)于作用域的話其實(shí)和js的作用域是相同的，會(huì)在當(dāng)前作用域下面查找我們的變量，如果沒(méi)有找到的話它會(huì)到上一級(jí)父元素中查找，如下所示：

@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");

我們有時(shí)候在輸入錯(cuò)誤的?css?的時(shí)候或者使用一些?less?不認(rèn)識(shí)的語(yǔ)法我們?cè)谳敵鲞@樣的值我們可以在字符串前面加上?“~”?這個(gè)符號(hào)，從而避免編譯的值用“”這個(gè)符號(hào)包含起來(lái)，如下所示：

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

(1)、JavaScript的表達(dá)式可以在 .less文件中進(jìn)行使用，我們可以通過(guò)反引導(dǎo)的方式進(jìn)行使用，如下所示：

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

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

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

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

@height: `document.body.clientHeight`;

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

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

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

相關(guān)資料：

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