Question

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

对于上下文，我尝试为样式指南设置调色板。颜色定义为变量，然后使用content属性列出。 @rocketRed可以编译为＆＃34;＃ff0048＆＃34;，但如何编译@rocketRed为＆＃34; @ rocketRed＆＃34;？

如果这还不够，那么我试图通过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 - ＆gt; @rocketRed - ＆gt; ＃ff0048。不知何故，我需要引用@color引用的内容，并通过将其转换为字符串来停止它。

这是我遇到的最接近的事情，实际上并不适用，但我想象解决方案（如果可能的话）会有些相似：{{3} }

我意识到我可能会对变量的工作方式进行一些界定，但有时候推动边界会有效！

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

- ＆GT;的CSS：

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

输出LESS变量名称为字符串

1 个答案:

---