Css 以字符串形式输出较少的变量名

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

在上下文中，我试图为样式指南设置一个调色板。颜色定义为变量，然后使用

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

显然不起作用。我真正想要编译的是：

内容：“@rocketRed”

我想问题的一部分是自动编译变量@颜色->@rocketRed->#ff0048。不知何故，我需要引用@color所引用的内容，并通过将其转换为字符串将其停止

这是我遇到的最接近的事情，实际上并不太适用，但我认为解决方案（如果可能的话）会有点类似：

我意识到我可能在变量的工作方式上施加了一些限制，但有时施加限制会奏效
 不，这根本不可能。如果您确实需要类似的操作，请反向操作（即通过将字符串转换为相应的变量值），例如：

或者（如果您希望代码中有更多引号）：

---
假设您出于某些调试/日志记录目的需要它，则可以将其优化为只使用一个伪元素：

@rocketRed: #ff0048;

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

.usage {
    .mixin(rocketRed);
}

->css:

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

考虑一个代码如<代码> .MIXIN（1＋2）；<猜猜为什么你想要的是不可能的。太好了！谢谢你的帮助。我总是忘了试着改变我的逻辑。看起来，这种简单的策略往往能找到解决办法。我遇到的下一个问题是将十六进制显示为内容，如果没有引号，我无法使用@技巧。虽然您建议将名称和值合并到一个伪元素中，但对于我尝试做的事情（我希望它们分开，以便可以独立地进行样式设置），它似乎仍然为这个新问题提供了一个很好的解决方案。下面是我如何使用它的：>如果没有引号，我无法使用@技巧。-这只是因为在codepen中，他们使用了一些较旧的版本，其中
@
中的颜色关键字（例如
蓝色
）被解释为原始颜色值（而不是实际标识符），因此
@
->
@未定义
。啊！有趣的是，我还得再检查一下，看看还有什么新的。谢谢你的信息
@rocketRed: #ff0048;

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

.usage {
    .mixin(rocketRed);
}

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