From 4d60646f1351c4ec8707d783ca6922dbe455edcc Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Thu, 13 Nov 2014 18:19:17 -0500 Subject: [PATCH] stylus: expand on sprites macros --- stylus-helpers.styl | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/stylus-helpers.styl b/stylus-helpers.styl index fc70579..ab65706 100644 --- a/stylus-helpers.styl +++ b/stylus-helpers.styl @@ -92,18 +92,24 @@ space-evenly(line_height = 1.2em) // 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 -- 1.7.10.4