一、十分鐘學(xué)會(huì)Less

概覽

less (Leaner Style Sheets的縮寫) 是一門向后兼容的CSS擴(kuò)展語(yǔ)言。這里呈現(xiàn)的是Less的官方文檔（中文版），包含了Less語(yǔ)言以及利用Javascript開發(fā)的用于將Less樣式轉(zhuǎn)換成CSS樣式的Less.js工具。

在Node.js環(huán)境中使用Less：

npm install -g less
//驗(yàn)證安裝成功
lessc -version //lessc 3.12.2 (Less Compiler) [JavaScript]

將less編譯成css文件

//也可使用vscode自帶插件
lessc style.less style.css

關(guān)于用法

1、定義變量

//定義變量
@main-color: cyan;
.bgColor {
    background: @main-color;
}

2、嵌入樣式

//嵌入樣式
.border {
    border: 1px solid #ccc;
}
.box {
    .border;
    background: skyblue;
}

3、定義函數(shù) mianButton(@bgcolor) 傳遞參數(shù) pink

//定義函數(shù)
//參數(shù)傳遞
.mainButton(@bgcolor) {
    background: @bgcolor;
}
//默認(rèn)參數(shù)
.border-top(@color: red) {
    border-top: 10px solid @color;
}
.redButton {
    .mainButton(pink);
    .border-top();
    text-align : center;
    line-height: 100px;
}

4、@_ 匹配模式封裝三角形樣式

//向上三角
.triangle(top, @w: 0.3125rem, @c: #ccc) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}

//向下三角
.triangle(bottom, @w: 0.3125rem, @c: #ccc) {
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

// 向左三角
.triangle(left, @w: 0.3125rem, @c: #ccc) {
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
}

// 向右三角
.triangle(right, @w: 0.3125rem, @c: #ccc) {
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}

//@_是固定格式，表示不管你匹配到誰(shuí)，都會(huì)帶上這些內(nèi)容
.triangle(@_, @w: 0.3125rem, @c: #ccc) {
    width: 0;
    height: 0;
    overflow: hidden;
}

// 用法
.triangle(right,@w:1.6vw,@c:#fff);

5、運(yùn)算

//運(yùn)算
@small-width:10px;
.small{
    width:2*@small-width;
}

6、嵌套規(guī)則

//嵌套規(guī)則
.list{
    width:10rem;
    li{
        height:1.5rem;
    }
    p{
        color:cyan;
        &:hover{
            //&代表上一層選擇器，這里指代p標(biāo)簽
            color:skyblue;
        }
    }
}

7、arguments 自動(dòng)填充所有變量

//arguments的好處就是可以自動(dòng)幫你填充所有變量
.border(@width:1px,@color:cyan,@style:solid){
    border:@arguments
}
//調(diào)用樣式
.box{
    .border(2px);
}

//渲染結(jié)果
.box{
    border:2px cyan solid;
}

二、Less注意事項(xiàng)

1）注釋問題

/*編譯后會(huì)被保留*/
//編譯后不會(huì)被保留

2）less同樣適用 !important

//border所有樣式都會(huì)帶上 !important
.box{
    .border(2px) !important;
}

3）避免編譯符號(hào) ~

在字符串前加上一個(gè)~即可用一些less不認(rèn)識(shí)的專有語(yǔ)法或者一些不正確的css語(yǔ)言。

// 這里顯然不是要用less去計(jì)算
.height{
    height:calc(300px - 30px);
}

// 加上避免編譯符號(hào)
.height{
    height: ~'calc(300px - 30px)';
}

關(guān)于less的一些基礎(chǔ)用法就總結(jié)到這里了，喜歡記得點(diǎn)個(gè)關(guān)注。