首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >手写笔:如何使用Mixin插值创建CSS变量

手写笔:如何使用Mixin插值创建CSS变量
EN

Stack Overflow用户
提问于 2021-10-07 10:35:51
回答 1查看 39关注 0票数 0

Stylus Mixin如何对变量定义的两侧进行插值,例如:

代码语言:javascript
复制
--MyVariable: MyVariable

在编译后的CSS中,--MyVariable应该保留为变量名,而第二个变量应该是为在其他地方定义的这个Stylus变量计算的数值。

我将有许多这样的CSS变量和Stylus变量对。现在,尽管我可以手动将它们写在Stylus文件中,但我希望有一个Mixin,它允许我通过将名称的共享部分作为Mixin的单个参数编写一次来创建它们,例如:

代码语言:javascript
复制
VariablePair(MyVariable-1) // --MyVariable-1: MyVariable-1
VariablePair(MyVariable-2) // --MyVariable-2: MyVariable-2
VariablePair(MyVariable-3) // --MyVariable-3: MyVariable-3

我试过了:

代码语言:javascript
复制
VariablePair(VariableName)
  --{VariableName}: VariableName

VariablePair(MyVariable)

它不能解析。

我意识到没有''MyVariable将作为一个不能附加到--的实际值出现。但是,将''作为VariablePair('MyVariable')添加到它将导致定义本身的右侧变成一个字符串,而不是用于计算的Stylus变量。

我尝试了括号的存在/缺失、''$以及连接的不同组合,但它们似乎都不起作用。'--' + VariableName + ': ' + VariableName (带/不带括号/ CSS )不工作,它要么不解析,要么解析,但没有在编译后的$中创建一行。

对此有解决方案吗?

EN

回答 1

Stack Overflow用户

发布于 2021-11-05 21:32:29

unquote works for this

代码语言:javascript
复制
VariablePair(name, val)
  {unquote('--' + name)}: val

.selector
  VariablePair('fontcolor', red)
  color: var(--fontcolor)

将输出

代码语言:javascript
复制
.selector {
  --fontcolor: #f00;
  color: var(--fontcolor);
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69479645

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档