Как работать с котировками в миксине s css - PullRequest
Новая
       66

Как работать с котировками в миксине s css

0 голосов
/ 08 мая 2020

У меня есть следующие миксины в файле .scss, который я пытаюсь скомпилировать с помощью 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: 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);

Я упустил что-то очевидное?

1 Ответ

0 голосов
/ 08 мая 2020

Вы можете переписать свой миксин, как показано ниже: 

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