将 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 所引用的内容，然后通过将其转换为字符串将其停在那里。

这是我遇到的最接近的事情，它确实不太适用，但我想解决方案（如果可能的话）会有点相似：Use selector name as variable in 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";
}