8

Compass を使用して CSS スプライトを生成しています。

スプライトを一度定義し、それをさまざまな .scss ファイルで使用する方法を見つけましたが、これが正しい解決策かどうかはわかりません。

今まで見つけた最良の方法は次のとおりです。

  • _variables.scss部分ファイルを作成する
  • _variables.scss部分ファイル内でスプライトを定義する
  • _variables.scssすべての .scss ファイルにパーシャルをインポートする

例

_variables.scss ファイル:

$siteSprite-spacing: 20px; 
@import "siteSprite/*.png";

firstPage.scss ファイル:

@import "../variables.scss";

.close {
    @include siteSprite-sprite(close, true);
}

secondPage.scss ファイル:

@import "../variables.scss";

.viewMore {
    @include siteSprite-sprite(arrow, true);
}

これは機能しますが...

問題は、Compass が scss ファイル (firstPage.scss、secondPage.scss) をコンパイルするたびに、_variables.scss パーシャルを読み取り、すべての画像を読み取り、毎回スプライトを生成しようとすることです。

その結果、コンパイルプロセスは次のようになります。

   create generated_images/siteSprite-s526a535d08.png
unchanged generated_images/siteSprite-s526a535d08.png
   create css/firstPage.css 
unchanged generated_images/siteSprite-s526a535d08.png
   create css/secondPage.css
unchanged generated_images/siteSprite-s526a535d08.png
   create css/thirdPage.css
unchanged generated_images/siteSprite-s526a535d08.png

siteSprite 画像フォルダー内に多くのページと多くのファイルがあるため、これは非常に低速です。

この問題を回避するにはどうすればよいですか?

4

1 に答える 1

2

コンパス スプライトの使用方法を説明します。これがあなたにも役立つことを願っています。私は通常、_base.scss 部分ファイルを作成します。このファイルには、すべての一般的な @import と @include に加えて、プロジェクトの一般的な css コードが含まれます。_base.scss には、次のスプライト固有のコードも追加します (アイコンを保持するフォルダーが「icon」と呼ばれ、アイコンの拡張子が .png であると仮定します)。

@import "compass/utilities/sprites";
@import "icon/*.png";
@include all-icon-sprites;

この _base.scss は、プロジェクトの *.css.scss ファイル (「firstPage.scss」および「firstPage.scss」に相当) にインポートする最初のファイルです。

これらのスプライトを div 内で使用するには、次のようにします。

#my_id (or .my_class) {
    @extend .icon-myicon;
}

ここで、「myicon」は「icon」フォルダー内の 1 つの .png ファイルの名前です。

このコンパスのチュートリアルは実際には非常に役立つので、ぜひご覧ください。

一部のファイルが複数回インポートされることが心配な場合は、プラグインcompass-import-onceを使用してみてください。

于 2014-02-13T13:24:37.920 に答える