/*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.