less基本語法筆記

2021-10-23 19:59:01 字數 954 閱讀 5265

以//開頭的注釋,不會被編譯到css檔案中

以/**/包裹的注釋會被編譯到css檔案中

a、使用@來宣告乙個變數:例 @red:red

#main
b、作為普通屬性值來使用:直接使用@red

c、作為選擇器和屬性名使用:#@的形式

// variables 

@my-selector: banner;

// usage

#@

d、作為url:@

e、變數是延遲載入的

a、基本巢狀規則

b、&的使用

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

.alert-

variant

(@background; @border; @text-color)

.alert-link

}

.center-

block()

.a

@state-success-text:             #3c763d;

@state-success-bg: #dff0d8;

@state-success-border:

darken

(spin

(@state-success-bg,-10

),5%

);.has-success

a、普通混合(編譯到原生css中)

b、不帶輸出的混合(加雙括號)

c、帶引數的混合

d、帶引數並且有預設值的混合

e、帶多個引數的混合

f、命名引數

g、匹配引數

h、arguments變數

效能比混合要高,靈活度比混合低。

less基本語法

less的注釋有兩種方式,一種為css用的 這種注釋的方法會被less所編譯成css。另一種為 這種不會被less所編譯 less 會被編譯 不會被編譯css輸出 會被編譯 less中用 變數名 值的方法來生命變數 less test width 100px test color red box c...

less開發(二) 基本語法

一 巢狀規則 less可以讓我們以巢狀的方式編寫層疊樣式,先看下面這段css box a hd.box a bd.txt box a other 在less中,可以用巢狀方式寫以上 box a bd other 變更簡潔與直觀,與dom樹結構很相似。符號 如果在巢狀規則中,想寫串聯選擇器,而不是寫後...

less的使用 基本語法 編譯

注釋 會被刪除 不會被刪除1.變數為屬性值定義變數 變數名 變數值 使用變數 屬性 變數名 變數 main color 333 用法 body2.變數為屬性或者為選擇器定義變數 變數名 變數值 使用變數 屬性值 變數 property color 屬性 用法 body 333 變數 myselect...