sprite - 在指南针精灵中组合类选择器？

Question

我的 icon.scss 中有这样的东西：

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

.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') 不重复；}

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

.blue-bullet li { 背景位置：0 -120px; }
...

如您所见，蓝点得到了它的背景位置，蓝点也得到了它的背景位置。两者都具有相同的背景位置。如预期。但是有可能将这些职位结合起来吗？假设我有更多的“特殊选择器”，那么我的 CSS 就太大了。所以必须有一个组合相同背景位置的解决方案。我错过了什么？

所以我喜欢最终得到类似的东西：

.icn-blue-dot,
.blue-bullet li {
背景位置：0 -120px;
}

干杯

Answer 1

代替

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

您可以使用

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