如何在scss mixin中处理引号

Question

我尝试使用.scss编译的gulp-sass文件中具有以下mixins

@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: 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

正如@symlink在前面的评论中所说，您的没有quotes的第三次尝试应该没问题。如果要查看使用循环方法创建样式的更多常规方法，请参阅文档here。

但是，如果您想使用更好的通用方法，则可以执行以下操作：

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

----------

// Or more short handed like this:

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

----------

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

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