2少參數，其中一個默認爲空

Question

嘿，我有2套圖標樣式。黑與白

settings-icon-white.png or settings-icon.png 

我現在用一個都不能少混入這需要一個文本參數：

//The mixin 
.icon-finder(@url){ 
    background-image: url("../images/icons/backend/@{url}-icon.png"); 
    background-size: cover; 
} 

//generated class:login-icon.png 
.icon-login{ 
    .icon-finder(login); 
} 

現在的挑戰是，我想也有一個選項，如果該參數來選擇白色圖標獲得通過white。有沒有辦法有一個默認的空參數，但可以使用，如果需要？

因此，例如：

.icon-finder(@url,@white){ 
    background-image: url("../images/icons/backend/@{url}-icon@{white}.png"); 
    background-position: center center; 
} 

但我不想白色的全部時間，所以這可以爲空？ @white = ""我確實看到這個@_是used before - 是嗎？

因此，代碼會是這樣：

.icon-admin{ 
    .icon-finder(admin); 
} 
.icon-admin-white{ 
    .icon-finder(admin,white); 
} 

我這麼想嗎？提前致謝！

Answer 1

是的，您可以通過在mixin聲明中指定它來爲mixin參數設置默認值，如下面的代碼塊中所示。 @white: ''部分表示當調用中未提供任何值時，mixin將取@white的值作爲空字符串。

.icon-finder(@url,@white: ''){ 
    background-image: url("../images/icons/backend/@{url}-icon@{white}.png"); 
    background-position: center center; 
} 
.icon-admin{ 
    .icon-finder(admin); 
} 
.icon-admin-white{ 
    .icon-finder(admin,white); 
} 

沒有必要使用在鏈接中提到的@_語法。

---

請注意，如果你喜歡一個mixin庫寫一些東西，要爲第二個參數的值限制爲白色或沒有（上述混入允許您發送的第二個PARAM任何值），那麼你可以使用下列選項也之一：

選項1：兩個單獨混入，一種具有硬編碼white值（請注意，它不是一個變量）和另一隻用一個參數。這樣，如果用戶試圖傳遞任何其他值，它將被拒絕。

.icon-finder(@url,white) { 
    background-image: url("../images/icons/backend/@{url}-iconwhite.png"); 
    background-position: center center; 
} 
.icon-finder(@url){ 
    background-image: url("../images/icons/backend/@{url}-icon.png"); 
    background-position: center center; 
} 
.icon-admin{ 
    .icon-finder(admin); 
} 
.icon-admin-white{ 
    .icon-finder(admin,white); 
} 

選項2：使用警衛和檢查，如果該值是白色與否。如果是，則使用白色背景圖像，否則使用默認值。

.icon-finder(@url,@white: '') { 
    & when (@white = white){ 
    background-image: url("../images/icons/backend/@{url}-iconwhite.png"); 
    background-position: center center; 
    } 
    & when not (@white = white){ 
    background-image: url("../images/icons/backend/@{url}-icon.png"); 
    background-position: center center; 
    } 
} 
.icon-admin{ 
    .icon-finder(admin); 
} 
.icon-admin-white{ 
    .icon-finder(admin,white); 
} 

第一選項的優點是，如果白色以外的任何值已定，那麼編譯器會拋出一個錯誤，並提醒提供了錯誤的值的用戶，而第二個會悄悄切換到默認。