Question

I have a CSS rule like this:

background: #fff url('/assets/img/file.png');

It is compiling to:

background: white url("/assets/img/file.png");

Is there any way to prevent it from converting it like that? There is JS on my page that looks for RGB values and I don’t want to have to convert those strings to RGB in some hacky function.

Answer 1

By default, Sass will not convert literal color values from their hex values unless you are forcing Sass to interpolate with #{} or a variable.

Using interpolation will return the “to_sass” version of the value you’re interested in. For example, #{ #fff } will interpolate to “white”. This also happens during variable replacements: color literals are translated to Color objects when used as variables, then “to_sass”ed into your stylesheet.

Furthermore, you may specify the style option compressed, which will return the less byte-length version (i.e. red instead of #f00). Since white is 5 characters long and #fff is only 4, your rule will replace with #fff instead.

There is no way to turn off the reverse HTML4 color name conversion when using variables. As a work-around, you can declare color variables as a string, then use then in styles with the unquote() function.

$color: '#fff';
.white { color: unquote($color) }