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并将密钥作为参数传递。您可以使用手写笔的+cache() function来防止发出重复的规则，就像使用@extend一样。

以下是使用可缓存mixins的示例：

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

有没有办法在Stylus中插入mixin名称

1 个答案: