JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
stylus: expand on sprites macros
authorJason Woofenden <jason@jasonwoof.com>
Thu, 13 Nov 2014 23:19:17 +0000 (18:19 -0500)
committerJason Woofenden <jason@jasonwoof.com>
Thu, 13 Nov 2014 23:19:17 +0000 (18:19 -0500)
stylus-helpers.styl

index fc70579..ab65706 100644 (file)
@@ -92,18 +92,24 @@ space-evenly(line_height = 1.2em)
 //     styl:
 //         nav li
 //             sprite-rollover "images/nav.png" 150 35 2
 //     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}
        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 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
 
 // Styling for a variable height element with an image background where the
 // middle repeats vertically. You must split your image into three images, and