有没有办法在手写笔插混入名

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; 
}