css – 将LESS变量名称输出为字符串

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

对于上下文,我正在尝试为样式指南设置调色板.颜色定义为变量,然后使用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";
}

：之前显然不起作用.我真正喜欢编译的是：

内容：“@ rocketRed”;

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

这是我遇到的最接近的事情,实际上并不太适用,但我认为解决方案(如果可能的话)会有些相似：Use selector name as variable in LESS mixin

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

不,这根本不可能.如果你真的需要这样的东西反过来(即通过将一个字符串转换成相应的变量值),例如：

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