1.1在線安裝
npm i -g less
1.2less編譯成css
我是用的vscode里面的插件easy less來(lái)編譯的吮便，這個(gè)插件會(huì)直接將.less文件自動(dòng)生成一個(gè).css文件髓需，方便初學(xué)者使用僚匆。之后可以和node來(lái)編譯了咧擂，最好配合webpack的webpack.config.js文件去配置檀蹋。
2.1使用
變量
less中的變量允許我們定義一系列通用的樣式，在需要的時(shí)候去調(diào)用贸桶，這樣在修改的時(shí)候只需要修改全局的變量就可以了桌肴，十分的方便识脆。
@bgColor:red;
body{color:@bgColor}
類名混入
在LESS中我們可以定義一些通用的屬性集為一個(gè)class，然后在另一個(gè)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ù)一樣定義一個(gè)帶參數(shù)的屬性集合.
注意：在定義參數(shù)要傳入默認(rèn)值宫蛆，如果沒(méi)有默認(rèn)值的猛，調(diào)用的時(shí)候必須要傳入值
.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中具是一個(gè)很特別的參數(shù)卦尊，當(dāng)Mixins引用這個(gè)參數(shù)時(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ù)匹配時(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)代碼的層級(jí)關(guān)系扫尺，我們也可以通過(guò)嵌套來(lái)實(shí)現(xiàn)繼承正驻，這樣很大程度減少了代碼量，代碼量看起來(lái)更加清晰肴颊。
#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";
