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 (eg 1px, bold), was "{"

Here's the example on CodePen .

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

Answer 1

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

Answer 2

node-sass not working with new sass syntax. use npm i sass package!

3 hours of debugging... sass, thanks...