I am trying to figure out how to implement background crop like this in Compass sprite:
<http://nicolasgallagher.com/css-background-image-hacks/>

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

This is what I have in .sass file:

```
@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

```

As you see, I tried to make .buttons-arrow without the background image first and then I added back the background-image. However, it gave me this .css file:

```
.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;
}

```

Obviously it was wrong because it combined into this `.buttons-arrow:before .buttons-arrow`

I just want a simple result like this

```
.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;

```

**How do I code this in Compass using sprite?**