将 LESS 变量名输出为字符串

Question

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

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

如果这还不够，我尝试通过混入传递变量可能会使情况变得更加复杂。否则它会破坏目的。

这是一个例子：

@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");
}

---

假设您出于某些 debug/logging 目的需要它，可以将其优化为仅使用一个伪元素：

@rocketRed: #ff0048;

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

.usage {
    .mixin(rocketRed);
}

-> css:

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

将 LESS 变量名输出为字符串

Output LESS variable name as string

css

less

---