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


不起作用=(

手写笔有可能吗?

最佳答案

使用单个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;
}

关于css - 有没有办法在手写笔中插值混合名称,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35700362/

10-13 00:43