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/