How to deal with quotes in scss mixin

Question

I have the following mixins in a .scss file that I try to compile with gulp-sass

@mixin bg-image($image-name){

    .bg-#{$image-name} {
       background-image: url("../images/#{$image-name}.jpg");          
       background-position: center;
       background-repeat: no-repeat;
       background-attachment: fixed;
    }
}

$sizes: 100, 300, 600, 1024, 1920;

@each $size in $sizes {
    @include bg-image(beach-1-#{$size} );
    [...]
}

The expected result for background-image is:

background-image: url("../images/beach-1-100.jpg");

But all what I have tried give me strange results: either there are no quotes, or there are too many ...

I tried a lot of combinaison but nothing produce the expected result

background-image: url("../images/#{$image-name}.jpg");          
// => background-image: url('"../images/beach-1-100.jpg"');

background-image: url("\"../images/#{$image-name}.jpg\"");      
// => background-image: url('"../images/beach-1-100.jpg"');

background-image: url(../images/#{$image-name}.jpg);            
// => background-image: url(../images/beach-1-100.jpg);

background-image: url(quote(../images/#{$image-name}.jpg));     
// doesn't complie

background-image: url(quote('../images/#{$image-name}.jpg'));    
//  => background-image: url(../images/beach-1-100.jpg);

background-image: url(unquote("\"../images/#{$image-name}.jpg\""));
//  => background-image: url(../images/beach-1-100.jpg);

Am I missing something obvious ?

The url function doesn't require quotes, so your third example should work fine — symlink, May 08 '20 at 16:36
@symlink Thanks a lot for your comment! I always used quotes thinking there was required... — Chris, May 08 '20 at 16:42

score 0 · Answer 1 · answered May 08 '20 at 20:09

0

You can re-write your mixin as below:

@mixin bg-image($image-name){
  .bg-#{$image-name} {
    $url: "../images/#{$image-name}.jpg";
    background-image: url($url);
  }
}

answered May 08 '20 at 20:09

Rohit Tiwari

1

Thanks for helping, but he gives me the same result as my third try, that works fine after verification. As @symlink pointed out, I was trying to force quotes, while quotes are not required – Chris May 08 '20 at 22:43

How to deal with quotes in scss mixin

1 Answers1