1

我试图弄清楚如何在 Compass sprite 中实现这样的背景裁剪：http: //nicolasgallagher.com/css-background-image-hacks/

http://jsfiddle.net/blineberry/BhbrL/

这就是我在 .sass 文件中的内容：

@import "buttons/*.png"
@include all-buttons-sprites

.buttons-arrow
  background-image: none
  width: 30px
  height: 45px

.buttons-arrow:before
  +buttons-sprites(arrow)
  display: block
  content: ""
  width: 15px
  height: 27px

如您所见，我尝试先制作没有背景图像的 .buttons-arrow，然后再添加回背景图像。但是，它给了我这个 .css 文件：

.buttons-sprite, .buttons-arrow, .buttons-arrow:before .buttons-arrow {
  background: url('../images/buttons-s5ae2b3a1e9.png') no-repeat;
}

.buttons-arrow {
  background-position: 0 0;
}

.buttons-arrow:hover, .buttons-arrow.arrow_hover, .buttons-arrow.arrow-hover {
  background-position: 0 -27px;
}

.buttons-arrow {
  background-image: none;
  width: 30px;
  height: 45px;
  margin-left: 150px;
}

.buttons-arrow:before {
  display: block;
  content: "";
  width: 15px;
  height: 27px;
}

.buttons-arrow:before .buttons-arrow {
  background-position: 0 0;
}

.buttons-arrow:before .buttons-arrow:hover, .buttons-arrow:before .buttons-arrow.arrow_hover, .buttons-arrow:before .buttons-arrow.arrow-hover {
  background-position: 0 -27px;
}

.buttons-arrow:hover {
  background-color: #ea4800;
}

显然这是错误的，因为它结合到了这个.buttons-arrow:before .buttons-arrow

我只想要一个这样的简单结果

.buttons-arrow {
  width: 30px;
  height: 45px;
  margin-left: 150px;
}

.buttons-arrow:before {
  background-image: url('../images/buttons-s5ae2b3a1e9.png');
  display: block;
  content: "";
  height: 27px;
  width: 15px;

如何使用 sprite 在 Compass 中编码？

4

2 回答 2

2

由于这个地方几乎已经死了，我会为从谷歌搜索这个的人提供帮助。答案是：

把这个放在上面：

$buttons: sprite-map("buttons/*.png")

我在那里有arrow.png和arrow_hover.png。这个想法是使用 sprite-map 函数而不是@import全部。然后确保包含:before伪元素的背景图像，但不包含原始内容：

.buttons-arrow
  width: 50px
  height: 50px
  &::before
    content: ""
    background: sprite($buttons, arrow) no-repeat
    display: block
    position: relative
    width: 20px
    height: 20px
  &:hover
    background-color: gray
    &::before
      content: ""
      background: sprite($buttons, arrow_hover) no-repeat
      position: relative
      width: 20px
      height: 20px
于 2012-10-09T03:38:18.770 回答
0

根据@HP 的回答，我可以弄清楚如何使它工作。代替

@include buttons-sprites(arrow)

只需使用

background: sprite($buttons-sprites, arrow);

这与@HP 提出的解决方法非常相似，但我没有调用，而是sprite-map使用隐式生成的变量$buttons-sprites。

于 2014-07-04T08:44:51.823 回答