Sass Invalid CSS: expected expression (e.g. 1px, bold), was "{"

Question

I have the following Sass, following this example for @each:

@each $flag in USA, EUR, JPN {
  a.#{$flag} {
    display:inline-block;
    overflow:hidden;
    width:0;
    height:11px;
    padding-left:16px; 
    background:url('http://res.cloudinary.com/mrengy/image/upload/v1470163121/#{$flag}.gif');
  }
}

It's just an example for an answer to another question. In CodePen, it is giving me an error:

Invalid CSS after "USA, EUR, JPN ": expected expression (e.g. 1px, bold), was "{"

Here's the example on CodePen.

That error makes no sense. What is the problem here?

Solution

Your code is actually SCSS, not SASS.

To make it work as SASS, you need to get rid of curly braces, semi-colons and add some spaces.

Here's the corrected code:

@each $flag in USA, EUR, JPN 

  a.#{$flag} 
    display:inline-block
    overflow:hidden
    width: 0
    height: 11px
    padding-left: 16px
    background: url('http://res.cloudinary.com/mrengy/image/upload/v1470163121/#{$flag}.gif') no-repeat

https://codepen.io/vic3685/pen/akaEyo?editors=1100

Comments

[Victoria Ruiz]

I know very little SASS, but I know SCSS. If you change the compiler to SCSS, your code works. Maybe if you haven't been working on this long, that's a switch you can still do...

[Mike Eng]

Well, that's odd. I actually just changed the preprocessor in Codepen to use SCSS, and that resolved it as well.