css - 在不包括魔术选择器的情况下在 Compass Sprite 中引用图标的方法

Question

这里特别引用了 Compass spriting 框架

按照此处的文档 http://compass-style.org/help/tutorials/spriting/#magic-selectors

我已经使用了这个方法，所以:

• selectors/ten-by-ten.png
• selectors/ten-by-ten_hover.png

.edit {
     @include selectors-sprite(ten-by-ten);
}

生成:

.selectors-sprite, .edit {
   background: url('/selectors-sedfef809e2.png') no-repeat;
}
.edit {
   background-position: 0 0;
}
.edit:hover, .edit.ten-by-ten_hover, .edit.ten-by-ten-hover {
   background-position: 0 -20px;
}

这真的很棒。但是，我想知道是否/如何在另一个实例中包含 Sprite 中的“十×十.png”图像而不包含神奇附加的悬停状态？

即

我想要这个:

.view {
     background: url('selectors/ten-by-ten.png') no-repeat;
}

悬停在此图标上不会触发 :hover 状态 (ten-by-ten_hover.png)。

但我想知道是否有一种方法可以实现这个仍然引用 sprited 图像？

感谢任何帮助/建议。

Answer 1

您可以使用@extend 指令将 Sprite 直接添加到元素。语法是@extend .folder prefix - sprite name - state (ie, .selectors-sprite-name_hover):

.view {
  @extend .selectors-ten-by-ten
}

  &:hover {
    @extend .selectors-ten-by-ten_hover
  }

  &:active {
    @extend .selectors-ten-by-ten_active
  }