2012-04-07 14 views
0

Ich habe so etwas in meinem icon.scss:Kombinieren Klassenselektoren in Kompass Sprite?

$ ICN-Sprite-base-Klasse: ".icn";
@import "icn/*. Png";
@include all-icn-sprites;

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

Die letzte Aussage ist von der "Selector Control" von http://compass-style.org/help/tutorials/spriting/ inspiriert. Das gibt mir diese Art von Ausgabe in meinem icons.css:

.icn, .icn-löschen, .icn-Taste, .icn-blau-Punkt .blue-Kugel li { background: url ('/images/icn-s55e477a40b.png') keine Wiederholung; }

.icn-blue-dot { Hintergrund-Position: 0 -120px; }

.blue-bullet li { Hintergrund-Position: 0 -120px; }
...

Wie Sie sehen können, die blau-Punkt bekommt seinen Hintergrund-Position, die blau-Kugel li sowie. Und beide haben die gleiche Hintergrundposition. Wie beabsichtigt. Aber ist es möglich, diese Positionen zu kombinieren? Nehmen wir an, ich hätte viel mehr "spezielle Selektoren", dann wäre mein CSS viel zu groß. Es muss also eine Lösung für die Kombination identischer Hintergrundpositionen geben. Habe ich etwas verpasst?

So möchte ich mit etwas, um am Ende wie:

.icn-blau-Punkt,
.blue-Kugel li {
background-position: 0 -120px;
}

Prost

Antwort

1

Statt

.blue-Kugel li {@include ICN-Sprite (blue-Punkt); }

können Sie verwenden

.blue-bullet li 
{ 
    @extend .icn-blue-dot; 
}