CSS預處理語言Less常用語法

Less是一種動態樣式語言，屬於css預處理語言的一種
它使用類似CSS的語法爲CSS的賦予了動態的特性
如變量，繼承，運算，函數等，更方便css的編寫和維護實現css模塊化

less 可以在多種語言，環境中使用，包括瀏覽器端、桌面客戶端、服務端
其實它非常簡單
要想使用less我們需要下載它
我選擇利用npm包管理器下載
npm install less less-loader

修改配置文件webpack.config.js

module: {
    loaders: [
        ...
        {test: /\.less$/, loader: 'style!css!less'},
        ...
    ]
}

變量

<div class="container">
    <div class="item"></div>
</div>

在less中我們可以使用變量

@w:100px;
@h:100px;
@c:orangered;
.container {
    width: @w;
    height: @h;
    background-color: @c;
}

這樣做就可以得到一個100×100的橘黃色元素
相當於

.container {
    width: 100px;
    height: 100px;
    background-color: orangered;
}

混合

less中 獨立選擇器樣式可以被直接用在其他選擇器樣式之中

.border {
    border: 2px solid black;
}
.container {
    .border;
}

相當於

.container {
    border: 2px solid black;
}

---

並且混合還可以帶參數，像函數一樣

.border(@border_width) {
    border: @border_width solid black;
}
.container {
    .border(2px);
}

參數還可以設置默認

.border(@border_width:2px) {
    border: @border_width solid black;
}
.container {
    .border;
}

通過它我們可以在兼容寫法中減少冗餘代碼

.borderRadius (@radius:5px)
 {
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     -ms-border-radius: @radius;
     -o-border-radius: @radius;
     border-radius: @radius 
 }

---

@arguements指代所有變量參數

border_arg (@w:2px, @x:solid, @c:black) { 
    border: @arguments; 
}

相當於

border_arg (@w:2px, @x:solid, @c:black) { 
    border: @w @x @c; 
}

border_arg { 
    border: 2px solid black; 
}

模式匹配

現在我想要畫一些不同的圖形

@w:100px;
@h:100px;
.draw(circle, @color) {
    width: @w;
    height: @h;
    background-color: @color;
    border-radius: 50%;
}
.draw(square, @color) {
    width: @w;
    height: @h;
    background-color: @color;
    border-radius: 5%;
}

這兩組樣式名稱一樣都叫做draw
區別就是一個匹配circle，另一個匹配square
如果想要畫一個紅色的圓

.container {
    .draw(circle, red);
}

想要畫一個綠色正方形

.container {
    .draw(square, green);
}

這就是模式匹配
不過還不夠簡潔
公共的部分可以這樣提取出來

@w:100px;
@h:100px;
.draw(circle, @color) {
    border-radius: 50%;
}
.draw(square, @color) {
    border-radius: 5%;
}
.draw(@_, @color) {
    width: @w;
    height: @h;
    background-color: @color;
}

“@_”就是代表公共的模式匹配
所有的子模式匹配都會擁有這些樣式

---

利用這個模式匹配我們可以簡化一些常用樣式的寫法

.pos(a) {
    position:absolute; 
}
.pos(f) { 
    position:fixed 
};

樣式計算

在less中，我們可以更輕鬆的進行樣式計算
完全不需要calc()

.container {
    width: @w + 50px;
    height: @h * 2;
    background-color: red;
}

嵌套

less中樣式中可以嵌套樣式

li { 
    a {
        color:#000;
        &:hover{
            color:#bbb;
        }
    }
}

“&”引用自身
相當於原生CSS的

li a {
    color:#000;
} 
li a:hover {
    color: #bbb;
}

這樣的嵌套樣式讓樣式結構更清晰

避免編譯

.container {
    width: calc(100% - 200px);
    height: 100px;
    background-color: red;
}

這段代碼我們在css中可能沒有任何問題
但是less不認識它
解決辦法是使用 ~'xxxx'
可以避免編譯

.container {
    width: ~'calc(100% - 200px)';
    height: 100px;
    background-color: red;
}

==主頁傳送門==