示例:
我們來看下面這個例子,定義了兩個混合::
.common (@w; @h) when ( @w >= 100px)
.common (@w; @h)
第乙個混合帶有條件判斷,第二個混合不帶有條件判斷,下面我們在兩個樣式類中引用上述的兩個混合:
.one
.two
編譯成 css **:
.one
.two
可以看到,在.one
中引用.common
混合時,給@w
引數賦值為150px
,滿足@w >= 100px
條件,所以**編譯後,.one
樣式類輸出了兩個混合中的樣式屬性。.two
樣式類則相反,不滿足@w >= 100px
條件,最後只輸出了不帶條件判斷的混合中的樣式屬性。
guards比較運算子
less 中包含五個guards
比較運算子,分別是>
,>=
,=
,=<
,<
。關鍵字true
是讓兩個mixins
等價的唯一真值,所以以下兩個mixins
是等價的:
.truth (@a) when (@a)
.truth (@a) when (@a = true)
除了關鍵字true
,其他任何值都是假值:
.truth (@a) when (@a)
.one
.two
編譯成 css **:
.one
也可以對兩個變數進行比較,例如我們來看下面這個例子:
示例:在mixins
中帶有兩個引數,如果引數@a
的值大於@b
,則width
的值為@a
,反之width
的值為@b
:
.xkd (@a; @b) when (@a > @b)
.xkd (@a; @b) when (@a < @b)
.one
.two
編譯成 css **:
.one
.two
guards邏輯運算子
當mixins
的判斷條件含有兩個或多個時,可以使用guards
邏輯運算子將條件進行關聯。邏輯運算子有and
、or
、not
三個。
示例:在mixins
中我們給出了兩個條件,乙個是引數必須是顏色值,還有乙個是必須是紅色,只有同時滿足這兩個條件,才會輸出color
屬性:
.xkd(@color) when (iscolor(@color)) and (@color = red)
.one
.two
編譯成 css **:
.one
示例:
在mixins
中有兩個條件,乙個是引數大於50px
,乙個是引數小於200px
,只要滿足其中乙個條件,就可以成功輸出:
.xkd(@width) when (@width > 50px), (@width < 200px)
.one
.two
編譯成 css **:
.one
.two
示例:
在mixins
中給出了乙個條件,引數大於100px
,但是因為使用了not
關鍵字來否定這個條件,所有只要滿足小於100px
就能成功輸出:
.xkd(@width) when not (@width > 100px)
.one
.two
編譯成 css **:
.one
default()函式
default()
函式可以用於根據已經建立好的的mixins
條件來形成該條件的補集。
示例:
.xkd(@width) when (@width > 100px)
.other(@width) when (default())
.one
.two
編譯成 css **:
.two
上述**中,在兩個樣式類中分別引用了.xkd
和.other
兩個混合,而.xkd
中的條件為引數大於100px
,.other
中的條件為引數小於等於100px
。default()
就等價於@width <= 100px
。 Less 混合守衛
本節我們學習混合守衛 mixins guards 當我們想在表示式上匹配簡單值或引數數量時,guards將會很有用。為了盡可能地保持 css 的宣告性質,在 media查詢特性規則中,less 選擇guards函式的形式而不是if else語句來實現條件執行。示例 我們來看下面這個例子,定義了兩個混...
less 函式 Less 混合
本節我們學習 less 中的混合 mixin 混合是一種將一組屬性從乙個規則集包含或混入到另乙個規則集的方法。簡單一點來說,其實混合就有點類似程式語言中的函式,通過這種方式,可以在 中實現復用。如果還不懂,下面我們通過實際例子來看一下混合的使用。我們先來看下面這段 less xkd good 可以很...
less學習 混合
在 less 中我們可以定義一些通用的屬性集為乙個class,然後在另乙個class中去呼叫這些屬性.下面有這樣乙個class bordered 那如果我們現在需要在其他class中引入那些通用的屬性集,那麼我們只需要在任何class中像下面這樣呼叫就可以了 menu a post a.border...