Sass interpolation issue

Question

I'm trying to access attribute with interpolation (Saas 3), but get an error.

    @each $icons in myPic1, myPic2 {
        [data-type=#{$icons}] span {
        background: url("/path/to/#{$buttons}.png") no-repeat scroll 50% 50%;}
    }

exec error: Error: Command failed: (sass):96: Invalid CSS after "... [data-type=": expected identifier or string, was "#{$icons}] span {" (Sass::SyntaxError)

How I can access attributes in that case?

Answer 1

If you surround your interpolation with double quotes it will work:

@each $icons in myPic1, myPic2 {
  [data-type="#{$icons}"] span {
  background: url("/path/to/#{$buttons}.png") no-repeat scroll 50% 50%;}
}

I'm not sure why. In CSS, strings can be quoted or unquoted. As you can see in this interesting article about quotes in strings in CSS:

So, a valid unquoted attribute value in CSS is any string of text that is not the empty string, consists of escaped characters and/or characters matching /[-_\u00A0-\u10FFFF]/ entirely, and doesn’t start with a digit or two hyphens or a hyphen followed by a digit.

So values you are using are correct strings without quotes.

SASS accepts as well both types of strings, quoted and unquoted. [data-type=myPic1] and [data-type="myPic2"] would be both correctly compiled. But for some reason if you use an interpolation you must quote it.