少量語法
以下示例是示例 Less 檔案,其中顯示瞭如何宣告和使用變數,如何在 Less 中定義和呼叫 mixins。
/* Variables */
@color-base: #87ceeb;
/* Simple mixin to set border */
.set-border(@width; @style; @color) {
border: @width @style darken(@color, 10%);
}
/* Main CSS */
.class1 {
background-color: @color-base;
.set-border(1px; solid; @color-base);
.class2 {
background-color: #fff;
color: @color-base;
.set-border(1px; solid; #fff);
}
}
編譯時的上述程式碼將生成以下 CSS :(為簡潔起見,將刪除註釋)
.class1 {
background-color: #87ceeb;
border: 1px solid #5bbce4;
}
.class1 .class2 {
background-color: #fff;
color: #87ceeb;
border: 1px solid #e6e6e6;
}