Sprite with mixins in Stylus

/*Variable to get the path of the sprite */ imagesPath = '/images/common/' spriteImage(file) .sprite background-image: url( imagesPath + file + '.svg') /*concatenate the path and file name */ background-repeat: no-repeat background-size: image-size(imagesPath + file + '.svg') /* image-size() get the size of the sprite */ .no-svg .sprite background-image: url(imagesPath + file + '.png') /* svg fallback(modernizr) */ background-repeat: no-repeat background-size: image-size(imagesPath + file + '.svg') spriteImage(myfile) /*myfile must be the same name as your sprite */ /* Result: .sprite { background-image: url("/images/common/myfile.svg"); background-repeat: no-repeat; background-size: 150px 2500px; } .no-svg .sprite { background-image: url("/images/common/myfile.png"); background-repeat: no-repeat; background-size: 150px 2500px; } */
Compile a class .sprite with a svg fallback (modernizr) and get the size of the image.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.