0

私は最近Sassを使用していて、ついにCompassを含めるようにジャンプしました（まあ、私はVS2010でMindscapeを使用し、ついに試してみることにしました）。私はスプライト生成能力が大好きです。知っている人には質問があります。

スプライトファイルで使用される画像を含む特定のディレクトリがあります。これまでの私のコードは次のとおりです。

@import "icons/*.png";

@each $p in (delete, docEdit, buttonBack, docView, editAcct, email, help, info, lock, search, unlock) {
    .#{$p} { @include icons-sprites(#{$p}); }
}

言うまでもなく、各要素はスプライトに含まれる特定の画像ファイルです。

これにより、リスト内の各アイテムが（サンプルとして）生成されます。

.delete .icons-delete {
    background-position: -23px 0;
}

.docEdit .icons-docEdit {
    background-position: -63px 0;
}

指定されたディレクトリにある.pngファイルのすべての名前を取得し、ハードコーディングせずに各ループを実行することで、これをさらに自動化できるかどうか疑問に思いました。このようにして、必要に応じて画像をドロップインまたは削除し、再コンパイルして、出力は、@eachディレクティブの下のリストにクラスを入力しなくてもクラスを自動的に作成します。

提案やコメントを事前に感謝します！

4

1 に答える 1

1

うん：

@import "icons/*.png";
@include all-icons-sprites;

詳細とオプションについては、CompassSpritingDocsを参照してください。

于 2013-02-14T18:25:19.917 に答える