// styl:
// nav li
// sprite-rollover "images/nav.png" 150 35 2
-sprite-rollover(image, width, height, count)
- width = unit(width, px)
- height = unit(height, px)
- width width
- height height
+sprites-rollover(image, width, height, count, h-offset = 0)
+ width: unit(width, px)
+ height: unit(height, px)
background: transparent url(image) top left no-repeat;
for n in (1..count)
&.n{n}
- y = (height - n * height)
+ y = - (@height * ( n - 1)) - h-offset
background-position 0 y
&:hover
- background-position -(width) y
+ background-position -(@width) y
+// see sprites-rollover
+sprites(image, height, count, h-offset = 0)
+ height: unit(height, px)
+ background: transparent url(image) top left no-repeat;
+ for n in (1..count)
+ &.n{n}
+ y = - (@height * ( n - 1)) - h-offset
+ background-position 0 y
// Styling for a variable height element with an image background where the
// middle repeats vertically. You must split your image into three images, and