Always Use Quotes in Sass Map Keys

A couple of years ago I ran into an issue with Sass not compiling the compressed version correctly and, just recently, one of my colleagues had a similar issue which I was able to identify right away.

Unquoted keys in a map.

Maps are the best way to create dynamically accessible data sets in Sass, but Maps can also cause errors or unwanted output when not using quotes for your keys. The most common issue is when using maps to create a list of colors to dynamically build classes with specific colored styles.

A common issue users encounter with named colors is that since Sass prefers the same output format as was typed in other output modes, a color interpolated into a selector becomes invalid syntax when compressed. To avoid this, always quote named colors if they are meant to be used in the construction of a selector. *


Using the above code as an example, one would expect the compressed output to be as follows:

However, when compiling in compressed mode many colors are converted using an alternate syntax, which causes errors.

A simple way to avoid this is to enforce quotes around map keys, thus ensuring that every compile mode will interpret keys the same.

With quotes, no more unexpected results.

Up Next:

Use Terminus to Update WordPress Core

Use Terminus to Update WordPress Core