Sass interpolation doesn't work

Question

How do I escape variable in url? Seems like this nor this variant do not work

@include image("R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")

@mixin image($base64)
    background: url(data:image/gif;base64,#{$base64}) //this is line N
    //background: url("data:image/gif;base64,#{$base64}")

(Line N: Properties are only allowed within rules, directives, mixin includes, or other properties.)

I tried sass 3.4.22 and 3.5.0-rc.1

score 2 · Accepted Answer · answered Apr 22 '17 at 14:33

The error message tells you that the background property needs to be wrapped by one of the named options.

@mixin image($base64)
  background: url(data:image/gif;base64,#{$base64})

.class
  @include image("R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")

compiles to

.class {
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
}

with SassMeister and Sass v3.4.21. I had to change the order of the mixin definition and its usage to make the compilation work. I don't know if this is just a compiler thing, it might work the other way around for you.

Sass interpolation doesn't work

1 Answers1