手写笔可以插入属性值而不是属性名吗？
手写笔可以插入属性值而不是属性名吗？
提问于 2021-09-24 01:56:26
我正在尝试在手写笔中使用Mixin和插值来设计.tag的样式。我希望Mixin将tagName作为变量，并将其向下传递给某些属性的值，以便为其他地方定义的值生成变量。
假设我有一个Stylus文件，它为不同的.tag定义颜色变量，比如color-TODO = red。然后，生成如下的CSS：
.tag-TODO
color: red // from color-TODO
background: blue // from color-TODO-background
box-shadow: 0 0 4px green // from color-TODO-shadow，我想用Mixin制作另一个Stylus文件，如下所示：
tag(tagName)
.tag-{tagName} // for .tag-TODO
color: color-{tagName} // for color-TODO
background: color-{tagName}-background // for color-TODO-background
box-shadow: 0 0 4px color-{tagName}-shadow // for color-TODO-shadow
tag(TODO) // to generate the selector with the properties这不起作用，大概是因为属性标识符后的{}是逐字解释的，而不是作为Mixin变量插入的。
我想知道是否有解决方法。有没有办法(在Stylus中)让Mixin (或另一个结构)生成不同的变量名，将相同的字符串共享为不同的属性值？
回答 1
Stack Overflow用户
发布于 2021-11-24 04:25:39
使用convert()内置函数(请参阅https://stylus-lang.com/docs/bifs.html)，您可以执行以下操作：
// your variables
color-TODO = #000
color-TODO-background = #666
color-TODO-shadow = #f2f2f2
// your mixin
tag(tagName)
.tag-{tagName}
color: convert("color-" + tagName)
background: convert("color-" + tagName + "-background") // for color-TODO- background
box-shadow: 0 0 4px convert("color-" + tagName + "-shadow") // for color-TODO-shadow
// execution
tag(TODO)生成css：
.tag-TODO {
color: #000;
background: #666;
box-shadow: 0 0 4px #f2f2f2;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69313073
复制相关文章
点击加载更多
相似问题
组合jQuery对象
组合json对象jquery
jquery如何组合data()对象
从多个页面组合jQuery对象
在JQUERY中组合2个JSON对象
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
