Output LESS variable name as string
我正在尝试将变量名引用为content属性中的实际文本字符串,而不是变量的值。
对于上下文,我正在尝试为样式指南设置调色板。颜色定义为变量,然后使用
如果那还不够的话,可能是由于我试图通过一个mixin传递变量而使情况变得更加复杂。否则会破坏目的。
这里是一个例子:
1 2 3 4 5 6 7 8 9 10 | @rocketRed:#ff0048; .mixin(@color) { &:before {content:"@color"}; &:after {content:"@{color}"}; } .test { .mixin(@rocketRed) } |
哪个编译为
1 2 3 4 5 6 | .test:before { content:"@color"; } .test:after { content:"#ff0048"; } |
我想问题的一部分是变量自动编译。 @color-> @rocketRed->#ff0048。我需要以某种方式仅引用@color所引用的内容,并通过将其转换为字符串将其停止在此位置。
这是我遇到的最接近的事情,确实不太适用,但是我认为解决方案(如果可能的话)会有些相似:在LESS中使用选择器名称作为变量mixin
我意识到我可能在限制变量的工作方式上有所突破,但有时会突破界限!
不,这根本不可能。如果您确实需要这样的操作,请反向执行(例如,通过将字符串转换为相应的变量值),例如:
1 2 3 4 5 6 7 8 9 10 | @rocketRed: #ff0048; .mixin(@color) { color: @@color; // variable value &:before {content:"@{color}"} // variable name } .usage { .mixin(rocketRed); } |
或者(如果您希望在代码中添加更多引号):
1 2 3 4 5 6 7 8 9 10 | @rocketRed: #ff0048; .mixin(@color) { color: @@color; // variable value &:before {content: @color} // variable name } .usage { .mixin("rocketRed"); } |
---
假设您出于某些调试/记录目的需要此功能,则可以对其进行优化以仅使用一个伪元素:
1 2 3 4 5 6 7 8 9 10 11 12 | @rocketRed: #ff0048; .mixin(@color) { &:before { content: %("@%a: %a", @color, @@color); } } .usage { .mixin(rocketRed); } |
-> css:
1 2 3 | .usage:before { content:"@rocketRed: #ff0048"; } |