输出LESS变量名称为字符串

Question

我试图将变量名称引用为内容属性中的实际文本字符串,而不是变量的值.

对于上下文,我正在尝试为样式指南设置调色板.颜色被定义为变量,然后使用content属性列出.@rocketRed可以编译为"#ff0048",但如何将@rocketRed编译为"@rocketRed"？

如果这还不够,那么我试图通过mixin传递变量可能会更加复杂.否则它会破坏目的.

这是一个例子:

@rocketRed:#ff0048;

.mixin(@color) {
  &:before {content: "@color"};
  &:after {content: "@{color}"};
}

.test {
  .mixin(@rocketRed)
}

编译到哪个

.test:before {
  content: "@color";
}
.test:after {
  content: "#ff0048";
}

该:before显然是行不通的.我真正喜欢编译的是:

content: "@rocketRed";

我想部分问题是变量自动编译.@color - > @rocketRed - >#ff0048.不知何故,我需要引用@color引用的内容,并通过将其转换为字符串来停止它.

这是我遇到的最接近的事情,这实际上并不太适用,但我认为解决方案(如果可能的话)会有些类似:在LESS mixin中使用选择器名称作为变量

我意识到我可能会对变量的工作方式提出一些界限,但有时候推动边界会有效!

Answer 1

不,这根本不可能.如果你确实需要这样的东西反向(即通过将字符串转换为相应的变量值),例如:

@rocketRed: #ff0048;

.mixin(@color) {
  color: @@color;                // variable value
  &:before {content: "@{color}"} // variable name
}

.usage {
    .mixin(rocketRed);
}

或者(如果您想在代码中添加更多引号):

@rocketRed: #ff0048;

.mixin(@color) {
  color: @@color;            // variable value
  &:before {content: @color} // variable name
}

.usage {
    .mixin("rocketRed");
}

---

假设您需要将其用于某些调试/日志记录目的,可以优化它以仅使用一个伪元素:

@rocketRed: #ff0048;

.mixin(@color) {
    &:before {
        content: %("@%a: %a",
            @color, @@color);
    }
}

.usage {
    .mixin(rocketRed);
}

- > css:

.usage:before {
  content: "@rocketRed: #ff0048";
}