Sass: If you want strings, use quotes

Color names always refer to colors in SCSS. If you want strings, use quotes.
— nex3

So yeah, I was using magenta as a class name, and interpolating it from a list of colors.

This doesn’t work:

$backgrounds: (
  navy-blue: $navy-blue,
  magenta: $magenta,
  purple: $purple
);

@each $key, $value in $backgrounds {
  /*! #{$key}: #{$value} */
  #masthead.#{$key} {
    background: #{$value};
  }
}

When compressing, Sass converts magenta into #f0f, so the rule would end up as #masthead.#f0f which, possibly because it makes no sense, gets dropped from the compressed output.

That “loud” comment was how I eventually nailed down what was breaking. Sass dropped the mal-formed rule, but wrote out the comment:

/*! #f0f: #c0b */ /*! purple: #80e */

Quoting the keys in the $backgrounds list fixes it:

$backgrounds: (
  "navy-blue": $navy-blue,
  "magenta": $magenta,
  "purple": $purple
);

@each $key, $value in $backgrounds {
  #masthead.#{$key} {
    background: #{$value};
  }
}

Results in this CSS:

#masthead.navy-blue { background: #004; }
#masthead.magenta { background: #c0b; }
#masthead.purple { background: #80e; }

Very subtle bug, I won’t make that mistake again.