1.1在線安裝

npm i -g less

1.2less編譯成css

我是用的vscode里面的插件easy less來編譯的，這個插件會直接將.less文件自動生成一個.css文件，方便初學(xué)者使用。之后可以和node來編譯了，最好配合webpack的webpack.config.js文件去配置。

2.1使用

變量

less中的變量允許我們定義一系列通用的樣式，在需要的時候去調(diào)用，這樣在修改的時候只需要修改全局的變量就可以了，十分的方便。

@bgColor:red;
body{color:@bgColor}

類名混入

在LESS中我們可以定義一些通用的屬性集為一個class，然后在另一個class中去調(diào)用這些屬性

.bordered {
  border-top: solid 1px red;
  border-bottom: solid 2px green;
}
.div1 {
  color: yellow;
  .bordered;
}
.div2 {
  color: blue;
  .bordered;
}

帶參數(shù)的函數(shù)混入

在LESS中，你還可以像函數(shù)一樣定義一個帶參數(shù)的屬性集合.
注意：在定義參數(shù)要傳入默認(rèn)值，如果沒有默認(rèn)值，調(diào)用的時候必須要傳入值

.border-radius (@radius: 5px) {
     border:1px solid red;
     border-radius: @radius;
     width:300px;
}
.div1 {
    .border-radius(0px);
}
.div3 {
    .border-radius;
}
.div2 {
    .border-radius(20px);
}

arguments

@arguments在Mixins中具是一個很特別的參數(shù)，當(dāng)Mixins引用這個參數(shù)時，他將表示所有的變量;

.pad(@top,@right,@bottom,@left) {
  padding:@arguments;
}
div{
  width:400px;
  border:1px solid red;
  .pad(10px,50px,100px,40px)
}
p
{
  background-color: green;
}

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

當(dāng)我們想根據(jù)表達(dá)式進(jìn)行匹配，而非根據(jù)值和參數(shù)匹配時，導(dǎo)引就顯得非常有用;

.mixin (@a) when (@a =red) {
  background-color: red;
}
.mixin (@a) when (@a =green) {
  background-color: green;
}
.mixin (@a) {
  color: @a;
}
.red { .mixin(red) }
.green { .mixin(green) }

嵌套

嵌套可以增強(qiáng)代碼的層級關(guān)系，我們也可以通過嵌套來實(shí)現(xiàn)繼承，這樣很大程度減少了代碼量，代碼量看起來更加清晰。

#dvi1 {
  color: red;

  p {
    font-size: 12px;
  }

  .logo {
    width: 300px;
    &:hover {
      text-decoration: none
    }
  }
}

@import 導(dǎo)入選項(xiàng)

@import 可以至于任何你需要導(dǎo)入的地方
@import "style.css";