less 的幾個規則

2022-06-15 14:48:08 字數 850 閱讀 7472

1.變數的延遲載入

@var: 0;

.class one: @var;// 1

}

2.混合就是將一系列屬性從乙個規則集引入到另乙個規則集的方式

變數使用@定義

.yanse(b, @w: 10px, @c: red)
.yanse(a, @w: 10px, @c: red)
.inner 

.inner2

.inner3

3.計算

div

4.繼承繼承被附在選擇器後面或放置在規則集,它看起來就像乙個在關鍵字extend後具有可選引數的偽類

.p}

.subclassone

/*最終編譯為

*/.p span,.subclassone

/*被繼承的選擇器寫在後面

*/.subclassone.p}

/*最終編譯為

*/.p span,.subclassone

繼承與混合區別

繼承效能比混合高

靈活度比混合低

5.避免編譯

/*

~""波浪號雙引號是不讓less編譯 因為瀏覽器自己可以編譯cacl表示式

*/div

/*編譯成

*/div

/*不讓less編譯

*/div

/*編譯成

*/div

Less的巢狀規則

在使用標準css時,要為多層巢狀的元素定義樣式,要麼使用後代選擇器從外到內的巢狀定義,要麼給這個元素加上類名或 id 來定義。這樣的寫法雖然很好理解,但維護起來很不方便,因為無法清晰了解到樣式之間的關係。在less中,巢狀規則使這個問題迎刃而解。巢狀規則允許在乙個選擇器中巢狀另乙個選擇器,這更容易設...

less巢狀規則

目錄 巢狀語法 優先順序 偽類 指令巢狀 html css container container left,container center,container right container left container center container right 將css的樣式改為使用les...

less的語法規則詳解

變數 less語法支援把乙個值,可以是顏色值,寬度,或者其他的任何屬性值和一段字串。用乙個變數儲存起來。這樣方便後期再出現重複的值可以直接使用自己定義的自己更為熟係的變數名直接賦值。定義乙個顏色的變數 gray aaa div 解釋成css格式 div定義的變數不會被解釋成css 可以在任何地方定義...