vue2 less less-loader 的用法

時間  2019-11-11
標籤 vue2 vue loader 用法 简体版
原文   原文鏈接

LESS基礎語法

　　咱們一塊兒來學習一下LESS的基礎語法，LESS的基礎語法基本上分爲如下幾個方面：變量、混合(Mixins)、嵌套規則、運算、函數、做用域等。這些基礎語法須要咱們先緊緊的掌握住，而後才能夠靈活的在項目中進行實戰。css

變量

　　和JS中的變量同樣，只是LESS的變量定義不是使用VAR而是使用@。web

//->LESS代碼
@link-color: #428bca;
@link-color-hover: darken(@link-color, 10%);

a {
    color: @link-color;
    &:hover {
        color: @link-color-hover;
    }
}

.box {
    color: @link-color;
}

//->編譯爲CSS的結果
a {
    color: #428bca;
}

a:hover {
    color: #3071a9;
}

.box {
    color: #428bca;
}

　　除了上述用變量存儲公用的屬性值，咱們還能夠用變量存儲公用的URL、選擇器等等less

 //->LESS代碼
.@{selector} {
    width: 100px;
    height: 100px;
    @{property}: #000;
    background: url("@{bgImg}/test.png");

    &:after {
        display: block;
        content: @@var;
    }
}
@selector: box;
@bgImg: "../img";
@property: color;
@name: "less基礎";
@var: "name";

//->編譯爲CSS的結果
.box {
    width: 100px;
    height: 100px;
    color: #000;
    background: url("../img/test.png");
}

.box:after {
    display: block;
    content: "百度";
}

　　在上述的代碼中咱們發現，變量存儲的值能夠做爲選擇器，也能夠做爲樣式屬性名，一樣也能夠像相似於JS中字符串拼接的方式把變量值的和另一個字符串進行拼接，並且@@var是把var變量存儲的值做爲另一個變量的名從而獲取對應的值。還有一點值的咱們注意的是，變量能夠定在使用代碼的下面，這個有點相似於JS中的預解釋，無論寫在上面仍是下面，都是至關於全局的變量，而且均可以把存儲值獲取到(可是建議你們把變量都統一在最上面定義)。函數

Mixin混合

一、基本使用

　　從字面意思上理解，所謂的混合其實應該是把不少的樣式混合在一塊兒，這樣理解不許確，我的的理解，所謂的混合實際上是把某個選擇器中的樣式拿過來使用，咱們看下面的代碼。oop

//->LESS代碼
.public {
    width: 100px;
    height: 100px;
}

nav ul {
    .public;
    list-style: none;
}

//->編譯爲CSS的結果
.public {
    width: 100px;
    height: 100px;
}

nav ul {
    width: 100px;
    height: 100px;
    list-style: none;
}

　　觀察上述的代碼，咱們發現其實nav ul是把public中設定的樣式屬性值copy了一份到本身的樣式中。若是你想在編譯完成的結果中不輸出public這個樣式的結果，只須要按照下述的代碼編寫便可：學習

//->LESS代碼
.public() {//->在選擇器後面加上()就能夠不編譯這個樣式了
    width: 100px;
    height: 100px;
}

nav ul {
    .public;
    list-style: none;
}

//->編譯爲CSS的結果
nav ul {
    width: 100px;
    height: 100px;
    list-style: none;
}

二、Extend

　　雖然在上述的案例中，nav ul把public中的樣式繼承了過來，可是原理倒是把代碼copy一份過來，這樣編譯後的CSS中依然會存留大量的冗餘CSS代碼，爲了不這一點，咱們可使用extend僞類來實現樣式的繼承使用。url

//->LESS代碼
.public {
    width: 100px;
    height: 100px;
}

nav ul {
    &:extend(.public);
    list-style: none;
}

//->編譯爲CSS的結果
.public, nav ul {
    width: 100px;
    height: 100px;
}

nav ul {
    list-style: none;
}

　　或者：spa

//->LESS代碼
.public {
    width: 100px;
    height: 100px;
}

nav ul:extend(.public) {
    list-style: none;
}

//->編譯爲CSS的結果和第一種寫法同樣

三、命名空間和做用域

　　在LESS的語法中，咱們能夠指定命名空間，實如今一個盒子中層級嵌套式的編寫。下面案例中，.box就是命名空間，裏面的img、.gray都是這個空間下的樣式，調取的話須要.box > .gray。orm

//->LESS代碼
.box {
    width: 100px;
    height: 100px;
    img {
        width: 100%;
        height: 100%;
    }
    .gray {
        color: #eee;
    }
    &:hover {
        background: green;
    }
}

#nav {
    .box;
}

#header {
    .box > .gray;
}

//->編譯爲CSS的結果
.box {
    width: 100px;
    height: 100px;
}

.box img {
    width: 100%;
    height: 100%;
}

.box .gray {
    color: #eee;
}

.box:hover {
    background: green;
}

#nav {
    width: 100px;
    height: 100px;
}

#nav img {
    width: 100%;
    height: 100%;
}

#nav .gray {
    color: #eee;
}

#nav:hover {
    background: green;
}

#header {
    color: #eee;
}

　　在LESS中定義了命名空間就建立了一個私有的做用域，在這個私有做用域中使用的變量都是先看一下本身做用域中有沒有，沒有的話，在向上一級查找（相似於JS的做用域鏈）。對象

//->LESS代碼
@color: #ccc;
.box {
    @color: #eee;
    .gray {
        color: @color;
    }
}

.box2 {
    .gray {
        color: @color;
    }
}

//->編譯爲CSS的結果
.box .gray {
    color: #eee;
}

.box2 .gray {
    color: #ccc;
}

四、!important

　　在調用的混合集後面追加 !important 關鍵字，可使混合集裏面的全部屬性都繼承 !important:

//->LESS代碼
@color: #ccc;
.box {
  @color: #eee;
  .gray {
    color: @color;
  }
}

nav ul {
  .box !important;
}

//->編譯爲CSS的結果
.box .gray {
    color: #eee;
}

nav ul .gray {
    color: #eee !important;
}

五、Parametric Mixins

　　如同JS同樣，LESS也能夠向函數同樣設定形參數，這個技巧在咱們的項目中會被常常的使用到，例如：處理CSS3的兼容問題

//->LESS代碼
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
  -webkit-transition: @property @duration @function @delay;
  -moz-transition: @property @duration @function @delay;
  -ms-transition: @property @duration @function @delay;
  -o-transition: @property @duration @function @delay;
  transition: @property @duration @function @delay;
}

.box1 {
  .transition;
}

.box2 {
  .transition(@duration: 2s);
}

.box3 {
  .transition(@duration: 2s; @property: width;);
}

//->編譯爲CSS的結果
.box1 {
    -webkit-transition: all 1s linear 0s;
    -moz-transition: all 1s linear 0s;
    -ms-transition: all 1s linear 0s;
    -o-transition: all 1s linear 0s;
    transition: all 1s linear 0s;
}

.box2 {
    -webkit-transition: all 2s linear 0s;
    -moz-transition: all 2s linear 0s;
    -ms-transition: all 2s linear 0s;
    -o-transition: all 2s linear 0s;
    transition: all 2s linear 0s;
}

.box3 {
    -webkit-transition: width 2s linear 0s;
    -moz-transition: width 2s linear 0s;
    -ms-transition: width 2s linear 0s;
    -o-transition: width 2s linear 0s;
    transition: width 2s linear 0s;
}

　　此外咱們須要值得注意的是，LESS中也有arguments。

//->LESS代碼
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
  -webkit-transition: @arguments;
  transition: @arguments;
}

.box1 {
  .transition;
}

//->編譯爲CSS的結果
.box1 {
  -webkit-transition: all 1s linear 0s;
  transition: all 1s linear 0s;
}

　　咱們還能夠把咱們的變量像JS的函數同樣操做，不只僅有參數，還有返回值。

//->LESS代碼
.average(@x, @y) {
  @result: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); //"call" the mixin
  padding: @result; //use its "return" value
}

//->編譯爲CSS的結果
div {
  padding: 33px;
}

六、Mixin Guards

　　咱們能夠在mixin中設置條件；經常使用的條件運算符：>、>=、<、<=、=；咱們設定的條件還可使用IS函數：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...

//->LESS代碼
.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}

.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}

.box1{
  .mixin(#ddd);
}

.box2{
  .mixin(#555);
}

//->編譯爲CSS的結果
.box1 {
  background-color: black;
}

.box2 {
  background-color: white;
}

　　when是在設置條件，除了像上面的寫法外，咱們還能夠經過when設置多個條件，並且條件中可使用is函數。

//->LESS代碼:使用IS函數
.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

//->LESS代碼:多條件，可使用and或者逗號間隔
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
.mixin (@a) when (isnumber(@a)) , (@a > 0) { ... }

　　咱們還能夠經過與&特性結合實現'if'類型的語句。

//->LESS代碼:這裏的意思是若是爲true,.box的文字顏色纔是白色
@my-option: true;
& when (@my-option = true) {
  .box {
    color: white;
  }
}

Loops

　　在Less中，混合能夠調用它自身。這樣，當一個混合遞歸調用本身，再結合Guard條件表達式，就能夠寫出循環結構。使用遞歸循環最多見的狀況就是生成柵格系統的CSS：

//->LESS代碼
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i <= @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

//->輸出的CSS
.column-1 {
    width: 25%;
}

.column-2 {
    width: 50%;
}

.column-3 {
    width: 75%;
}

.column-4 {
    width: 100%;
}

Merge

　　Merge特性能夠從多個屬性中將值，集合到某一個樣式屬性的列表中（也就是多樣式效果）。在編寫的時候，+表明以逗號分隔，+_表明多個以前以空格分隔。

//->LESS代碼
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}

.myclass {
  .mixin;
  box-shadow+: 0 0 20px black;
}

.mixin2() {
  transform+_: scale(2);
}

.myclass2 {
  .mixin2;
  transform+_: rotate(45deg);
}

//->輸出的CSS
.myclass {
    box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

.myclass2 {
    transform: scale(2) rotate(45deg);
}

Parent Selectors

　　&運算符其實就是讓當前的選擇器和父級選擇器按照特定的規則進行鏈接，看下面的案例：

//->LESS代碼
.box {
  color: blue;
  &:hover {
    color: green;
  }

  &-top {
    height: 30px;
  }

  &-center {
    height: 500px;
  }

  //->多個&&
  & + &-top {
    color: red;
  }

  & &-top {
    color: grey;
  }

  &&-top {
    color: black;
  }

  &, &-top {
    color: orange;
  }
}

//->輸出的CSS
.box {
    color: blue;
}

.box:hover {
    color: green;
}

.box-top {
    height: 30px;
}

.box-center {
    height: 500px;
}

.box + .box-top {
    color: red;
}

.box .box-top {
    color: grey;
}

.box.box-top {
    color: black;
}

.box, .box-top {
    color: orange;
}

　　改變選擇器順序，下面的案例中，選擇器.no-border-radius &會前置插入它的父選擇器.header .menu，最後變成.no-border-radius .header .menu形式輸出：

//->LESS代碼
.header {
  .menu {
    border-radius: 5px;
    .no-border-radius & {
      background-image: url('images/button-background.png');
    }
  }
}

//->輸出的CSS
.header .menu {
    border-radius: 5px;
}

.no-border-radius .header .menu {
    background-image: url('images/button-background.png');
}

Import Directives

　　從其餘樣式表中導入樣式。

//->LESS代碼
@import "public.less";

.box {
  &:after {
    .clear;
  }
}

//->輸出的CSS:會把public中的樣式也輸出
.clear {
    display: block;
    height: 0;
    content: "";
    clear: both;
    zoom: 1;
}

.box:after {
    display: block;
    height: 0;
    content: "";
    clear: both;
    zoom: 1;
}

　　咱們發現上述的操做雖然實現了調取使用，可是會把public中的less也編譯到了本身的這個css中，若是不想編譯的話，咱們須要配置一些參數：

//->LESS代碼
@import (reference) "public.less";

.box {
  &:after {
    .clear;
  }
}

//->輸出的CSS:
.box:after {
    display: block;
    height: 0;
    content: "";
    clear: both;
    zoom: 1;
}

　　除了reference之外咱們還能夠配置一些其餘的參數值： inline：在輸出中包含源文件但不加工它 less：將文件做爲Less文件對象，不管是什麼文件擴展名 css：將文件做爲CSS文件對象，不管是什麼文件擴展名 once：只包含文件一次（默認行爲） multiple：包含文件屢次

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程