Search code examples
csssasscompass-sass

SASS/Compass is missing one entry in @each when using compressed output


Following SCSS snippet generates the appropriate CSS after using compass compile. But if I use -output_style compressed the CSS is missing the .box-yellow definition. .box-red etc. is generated but yellow is missing.

$colors: red #f00, yellow #ff0, green #0f0, blue #00f;

@each $entry in $colors {
    $name: nth($entry, 1);
    $color: nth($entry, 2);

    .box-#{$name} > header {
         background: $color;
    }
 }

Could this be a bug or am I missing something here?


Solution

  • Not sure if it's a bug, but it seems odd to me. I can replicate that here with v 3.2.3 if I set the style to compressed. Oddly, shortening it to yello works fine. A workaround is to quote them:

    $colors: "red" #f00, "yellow" #ff0, "green" #0f0, "blue" #00f;
    

    That generates:

    .box-red>header{background:red}.box-yellow>header{background:#ff0}.box-green>header{background:lime}.box-blue>header{background:blue}
    

    And now that I look at the output again, a pattern emerges: The other colors generate a color name rather than a hex value.