Mike Eng Mike Eng - 4 months ago 34
CSS Question

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

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');
}
}


Its 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?

Answer

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