0

icon.scss に次のようなものがあります。

$icn-sprite-base-class: ".icn";
@import "icn/*.png";
@include all-icn-sprite;

.blue-bullet li { @include icn-sprite(blue-dot); }

最後のステートメントは、 http://compass-style.org/help/tutorials/spriting/の「セレクター コントロール」に触発されています。これにより、icons.css に次のような出力が得られます。

.icn, .icn-delete, .icn-key, .icn-blue-dot .blue-bullet li { background: url('/images/icn-s55e477a40b.png') no-repeat; }

.icn-blue-dot { 背景位置: 0 -120px; }

.blue-bullet li { background-position: 0 -120px; }
...

ご覧のとおり、青い点は背景の位置を取得し、青い黒丸の liも同様です。そして、両方とも同じ背景位置を持っています。意図した通り。しかし、これらのポジションを組み合わせることは可能ですか? 「特別なセレクター」がはるかに多いと仮定すると、CSS が大きくなりすぎます。したがって、同一の背景位置を組み合わせるソリューションが必要です。私は何か見落としてますか？

だから私は次のようなもので終わるのが好きです:

.icn-blue-dot,
.blue-bullet li {
background-position: 0 -120px;
}

乾杯

4

1 に答える 1

1

それ以外の

.blue-bullet li { @include icn-sprite(blue-dot); }

使用できます

.blue-bullet li
{
    @extend .icn-blue-dot;
}
于 2012-09-26T12:57:28.813 に答える