如何处理scss mixin中的引号

Question

我在.scss 文件中有以下mixin，我尝试使用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} );
    [...]
}

background-image 的预期结果是：

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(../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);

我是否遗漏了一些明显的东西？

Answer 1

你可以重写你的 mixin 如下：

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