Question

I am using compass to produce my CSS stylesheets.

In my style sheets, I have several mixins that are used to generate classes. Many of these classes have the word “black” in them.

Everything works fine. However, when I go to compile my scss stylesheets for production, “black” is replaced with #000 in the final style sheet, which breaks my classes.

How can I prevent this?

The code I am using to compile the style sheet is:

compass compile -e production --force

This is the command listed in the compass documents.

Answer 1

The problem is that the color keywords are being interpreted as color values, not as strings. You can coerce them into strings by surrounding them with quotes. For example:

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

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

In that way, the color property value will be compressed, but the class name will not.