有没有办法在手写笔中插值混合名称

Question

colors = {
    base: gray,
    info: blue
}

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

现在，我可以在标记中使用生成的类，例如：

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

或通过@extends内部样式

.item-card
    @extends .skin-bg-base
    @extends .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()函数来防止发出重复的规则，就像@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;
}