Less之混合守衛

2021-10-10 05:57:04 字數 2843 閱讀 1472

示例:

我們來看下面這個例子,定義了兩個混合::

.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邏輯運算子將條件進行關聯。邏輯運算子有andornot三個。

示例:在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中的條件為引數小於等於100pxdefault()就等價於@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...