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'）no-repeat;     }

.icn-blue-dot {       background-position：0 -120px;      }

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

如您所见， blue-dot 也会获得其背景位置， blue-bullet li 。两者都有相同的背景位置。如预期。但结合这些立场是否可能？让我们假设我有更多的“特殊选择器”，那么我的CSS会太大了。因此，必须有一个组合相同背景位置的解决方案。我错过了什么吗？

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

.icn蓝色点，
     .blue-bullet li {
       background-position：0 -120px;
     }

干杯

Answer 1

而不是

.blue-bullet li {@include icn-sprite（blue-dot）; }

您可以使用

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

在罗盘精灵中组合类选择器？

1 个答案: