3

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;
}

ただし、画像の URL を base64 画像に置き換えると、次のようになります。問題は、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 文字列を繰り返さない方法はありますか?

4

1 に答える 1

6

を使用し@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。

于 2013-05-23T12:38:32.077 に答える