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