Vue-cli中如何安裝并使用Less

這篇文章主要介紹了Vue-cli中如何安裝并使用Less的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue-cli中如何安裝并使用Less文章都會有所收獲，下面我們一起來看看吧。

一、安裝

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

npm install less less-loader --save-dev

我們可以在vue項(xiàng)目中的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標(biāo)簽上面寫上lang=“l(fā)ess”從而表示以less語法解析css，下面我們就可以進(jìn)行less的實(shí)操。

二、less語法介紹、

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

1、語法變量

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

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

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

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

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

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

(3)、通常我們在寫css樣式的時候會重復(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;
}

我們通過定義一個class類然后在其他的class中進(jìn)行調(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è)定默認(rèn)值代碼如下：

.border-radius (@radius:4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#tabBar{
  .border-radius();//此時不傳值也會有默認(rèn)值傳入
}
.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ù)來改變混合的默認(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);
}

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

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

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

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

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

//when關(guān)鍵字用以定義一個導(dǎo)引序列(此例只有一個導(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)引序列使用逗號‘,’—分割，當(dāng)且僅當(dāng)所有條件都符合時，才會被視為匹配成功，如下代碼：

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

(4)、導(dǎo)引可以無參數(shù)，也可以對參數(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ī)則

嵌套的寫法會讓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)選擇器，而不是寫后代選擇器。這點(diǎn)對偽類尤其有用，如:hover和:focus

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

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

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

解析之后是這樣的：

.bordered.float {//中間沒有空格
  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會輸出6px
//括號也同樣允許使用
width: (@var + 5) * 2;
//可以在復(fù)合屬性中進(jìn)行運(yùn)算
border: (@width * 2) solid black;

7、color函數(shù)

(1)、我們在less中可以知道它提供了一系列的顏色運(yùn)算函數(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、作用域

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

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

13、避免編譯

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

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

14、JavaScript表達(dá)式

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

@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進(jìn)制的顏色值，代碼如下：

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

關(guān)于“Vue-cli中如何安裝并使用Less”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue-cli中如何安裝并使用Less”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。