Question

这特别是指Compass spriting framework

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

我已经使用过这个方法：

选择器/ 10逐ten.png

选择器/ 10逐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;
}

这真的很棒。但是，我想知道If / How在另一个例子中我可以包含sprite中的“ten-by-ten.png”图像而不包括神奇附加的悬停状态？

即

我想要这个：

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

将鼠标悬停在此图标上不会触发：悬停状态（ten-by-ten_hover.png）。

但是我想知道是否有办法实现这一点仍然引用了sprited图像？

感谢您提供任何帮助/建议。

Answer 1

您可以使用@extend指令将sprite直接添加到元素。语法是@extend .folder prefix - sprite name - state（即.selectors-sprite-name_hover）：

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

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

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

Answer 2

.selectors-ten-by-ten_hover，.selectors-ten-by-ten_active等在Compass中为我返回了类找不到的错误。

然而，这有效：

.viewHover {@extend .selectors-ten-by-ten：hover; }

.viewActive {@extend .selectors-ten-by-ten：active; }

在Compass Sprite中引用图标的方法，不包括魔术选择器

2 个答案: