Mixin 和 CSS Guards
阿新 • • 發佈:2020-10-14
當我們想在表示式上進行匹配簡單的值或者是引數數量時,我們可以使用Guards;它與mixin宣告相關聯,幷包括附加到mixin的條件。每個mixin將有一個或多個由逗號分隔的防護,並且guard必須括在括號中。
為了儘量接近css的宣告性,Less選擇了使用通過受保護的Guards的mixins而不是if / else語句執行,並執行計算以指定匹配的mixin。
Guard 比較運算子
Guards中可用的比較運算子的完整列表為:>,>=,=,=<,<,此外關鍵字 true 是唯一的真實值,使這兩個mixin等價。
.compare (@a) when (@a) { ... }
.compare (@a) when (@a = true) { ... }
// 除關鍵字以外的任何值 true 都是偽造的
.xkd{
.compare(40);
}
// 可以將引數相互比較或與非引數進行比較
@media: mobile;
.mixin (@x) when (@media = mobile) { ... }
.mixin (@x) when (@media = desktop) { ... }
.max (@x; @y) when (@x > @y) { width: @x }
.max (@x; @y) when (@x < @y) { width: @y }
Guard 邏輯運算子
可以將邏輯運算子與防護一起使用,語法基於css媒體查詢。
// 1:使用and關鍵字來組合保護
.mixin (@x) when (isnumber(@x)) and (@x > 0) { ... }
// 2:通過用逗號分隔保護來模擬或運算子,如果任何一個守衛評估為true,則認為是匹配
.mixin (@x) when (@x > 10), (@x < -20) { ... }
// 3:使用not關鍵字否定條件
.mixin (@y) when not (@y > 0) { ... }
型別檢查函式
如果要根據值型別匹配混合,那麼我們可以使用 is 功能。
.mixin (@x; @y: 0) when (isnumber(@y)) { ... }
.mixin (@x; @y: black) when (iscolor(@y)) { ... }
基本的型別檢查功能:
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
如果要檢查值是否是數字,是否還使用特定單位,則可以使用以下方法之一:
- ispixel
- ispercentage
- isem
- isunit
電腦刺繡繡花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
條件混合
(fixme)另外,預設函式可用於根據其他混合匹配進行混合匹配,並且我們可以使用它建立類似於else或預設語句(分別是if和case結構)的條件混合。
.mixin (@x) when (@x > 0) { ... }
// 僅當第一個mixin不匹配時匹配,即當@x<=0時
.mixin (@x) when (default()) { ... }
CSS Guards
保護也可以應用於css選擇器,這是宣告mixin然後立即呼叫它的語法糖。
直接將保護應用於樣式
button when (@mystyle = true) {
color: white;
}
if 通過將其與 & feature結合使用來實現if-type語句,從而允許我們對多個防護進行分組。
& when (@mystyle = true) {
button {
color: white;
}
a {
color: green;
}
}