Pseudo background-crop with Compass sprite

[qhoc]

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?**

[TheDoc]

I’m not really sure what you want. In your JSfiddle everything is working as it should.

You’ve written: “Image is 500px by 500px, but only 200px by 50px is showing.”

But you’ve set the pseudo element to be exactly 200×50, so I’m not sure what you thought was going to happen.

[qhoc]

The link above was example from someone else.

OK, this is what I want to happen from the Compass sprite method
http://jsfiddle.net/qhoc/vEvSJ/

But this is what I got (which is blank):
http://jsfiddle.net/qhoc/Ac5rG/

I know how this works in css but how to do this in Sass / Compass syntax?

[Author]

Posts