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

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 不同且不应共享的样式。