将LESS变量名输出为字符串

Question

将LESS变量名输出为字符串

cssless

4

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

为了更好地理解，我正在设置样式指南的调色板。颜色被定义为变量，然后使用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中使用选择器名称作为变量

我意识到我可能在推动一些关于变量工作方式的边界，但有时推动边界会有好处！

- Chase

考虑这样的代码 .mixin(1 + 2);，你就会明白为什么你想要的是不可能的。 - seven-phases-max

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- seven-phases-max · Accepted Answer

不行，这是不可能的。如果你确实需要这样的功能，可以采用相反的方法（将字符串转换为对应的变量值），例如：

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