指南针：编译样式表将“黑色”更改为“#000”答案

【问题标题】：Compass: Compiling Style Sheets Changes "Black" to "#000"指南针：编译样式表将“黑色”更改为“#000”
【发布时间】：2012-10-10 15:02:10
【问题描述】：

我正在使用 compass 来生成我的 CSS 样式表。

在我的样式表中，我有几个用于生成类的 mixin。许多这些类中都有“黑色”这个词。

一切正常。但是，当我去编译我的 scss 样式表以进行生产时，“黑色”在最终样式表中被替换为 #000，这会破坏我的类。

如何防止这种情况发生？

我用来编译样式表的代码是：

compass compile -e production --force

这是compass documents 中列出的命令。

【问题讨论】：

为什么这会破坏你的课程？ Black 和 #000 的最终外观相同。
对不起！我没有解释清楚。这就是我的 Scss .black { color: black; } 的样子。这就是 Compass 产生的 .#000 {color: #000;} 。 HTML 是 <div class="black">，因此 .#000 black 类不再有效。
拥有这样名称的类会带来麻烦...除非您真的在使用颜色方案，否则您应该选择实际上具有语义意义的名称。
是的，我正在使用配色方案（我正在制作颜色目录）。我可以更改名称，但这会降低代码的可读性。如果它不是用于配色方案，我可以使用其他东西，例如 .alert{} 或 .primary{} 并且代码仍然是可读的。我可以理解指南针更改color:black，但不应该让.black 一个人呆着。
@big_smile 啊，我明白了。那似乎是指南针中的错误。叫它 .color_black 怎么样？

【解决方案1】：

问题在于颜色关键字被解释为颜色值，而不是字符串。您可以通过用引号将它们强制转换为字符串。例如：

$classname: "black";
$color: black;

.#{$classname} {
  color: #{$color};
}

这样，颜色属性值会被压缩，但类名不会。

【讨论】：