CSS LESS是一款開源的CSS預處理器，能夠在樣式表里增加變量、函數、運算、繼承等特性，簡化了CSS樣式表的編寫，提高了編碼效率。本文將介紹CSS LESS的用法。

安裝

npm install less

變量

CSS LESS的一個主要特點是，能夠使用變量。只需定義變量一次，便可以在整個樣式表中使用。具體方法如下：

@color: #0066cc;
#header {
background: @color;
}
h2,h3 {
color: @color;
}

嵌套

CSS LESS允許樣式規則嵌套，這使得樣式表更清晰易讀。

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {font-size: 12px;}
}

繼承

CSS LESS允許樣式規則之間的繼承，從而減少冗余代碼。

#header {
border: 1px solid #ccc;
.navigation {
font-size: 14px;
}
}
#footer {
@extend #header;
.navigation {
font-size: 12px;
}
}

運算

CSS LESS支持四則運算，例如：

@base: 5%;
#header {
height: 100% - @base;
}

Mixin

在CSS LESS中，Mixin是一種重復使用CSS樣式的方式。它可以定義一組CSS樣式，然后通過引用Mixin來使用它。例如：

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners (10px);
}

CSS LESS的以上特性可以大大提高CSS樣式表的編寫效率，讓代碼更加簡潔易懂。