SASS解决方案在不同的CSS文件中使用相同的base64图像？

Question

我使用SASS和base64编码的图像.我在多个地方重复使用相同的背景图像,理想情况下我喜欢将代码保存在单独的文件中.

如果我没有使用base64图像,这将是我的SASS代码:

$background-image: url(image-file.jpg);

.div1 {
    background-image: $background-image;
}

//This is in a seperate file
.div2 {
    background-image: $background-image;
}

但是,如果我现在用base64图像替换图像URL,则它看起来如下所示.问题是重复了base64编码的字符串,这会不必要地增加文件大小.

$background-image: url(data:image/jpeg;base64,/9j/4AAQSk);      

.div1 {
    background-image: $background-image;
}
//This is in a seperate file
.div2 {
    background-image: $background-image;
}

那么有没有办法让我的代码保持良好和组织在单独的文件中,并使用base64图像,而不是重复base64字符串？

Answer 1

使用@extend.

%my-bg {
    background-image: url(data:image/jpeg;base64,/9j/4AAQSk);
}

.div1 {
    @extend %my-bg;
}

//This is in a seperate file
.div2 {
    @extend %my-bg;
}

输出:

.div1, .div2 {
  background-image: url(data:image/jpeg;base64,/9j/4AAQSk);
}

没有必要像这样拆分背景图像(即,你只是@extend .div;反而),但我认为.div1将有不同的.div2和不应共享的其他样式.