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并且不应该共享。