有沒有辦法在手寫筆插混入名

Question

colors = { 
    base: gray, 
    info: blue 
} 

for key, val in colors 
    .skin-bg-{key} 
     background val 
    .skin-bd-{key} 
     border 1px solid val 

現在，我可以用我生成的標記像在類：通過@extends

.item-card 
    @extends .skin-bg-base 
    @extends .skin-bd-info 

但看完後

div.skin-bg-base.skin-bd-info 

或內部風格許多mixin的資源比@extends更好，我試圖生成相同名稱的mixins，但沒有結果

for key, val in colors 
    {'skin-bg-' + key}() 
     background val 

或

mixins = {} 
for key, val in colors 
    mixin[{'skin-bg-' + key}]() 
     background val 

不工作=（

有可能在手寫筆？

Answer 1

使用單個mixin並將該密鑰作爲參數傳遞。您可以使用Stylus的+cache() function來防止發生重複規則，就像@extend一樣。

下面是使用緩存的混入你的例子：

colors = { 
    base: gray, 
    info: blue 
} 
skin-bg(key) 
    +cache(key) 
    background: colors[key] 
skin-bd(key) 
    +cache(key) 
    border: 1px solid colors[key] 

.item-card 
    skin-bg: base 
    skin-bd: info 
.other-card 
    skin-bg: base 

編譯成如下：

.item-card, 
.other-card { 
    background: #808080; 
} 
.item-card { 
    border: 1px solid #00f; 
}