sass - Using Compass sprites, generated CSS uses all class names as well as shared one -
sass - Using Compass sprites, generated CSS uses all class names as well as shared one -
say have html this:
<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/styles.css"></link> </head> <body> test <a class="ribbons-sprite ribbons-exclusive" href="#">exclusive</a> <a class="ribbons-sprite ribbons-featured" href="#">featured</a> </body> </html>
and have sass (scss) this:
@import "compass/utilities"; @import "ribbons/*.png"; @include all-ribbons-sprites(true); .ribbons-sprite { display: inline-block; text-indent: -9999px; }
the outputted css this:
.ribbons-sprite, .ribbons-exclusive, .ribbons-featured { background: url('../images/ribbons-scfb85024fb.png') no-repeat; } .ribbons-exclusive { background-position: 0 -38px; height: 59px; width: 59px; } .ribbons-featured { background-position: 0 0; height: 38px; width: 70px; } .ribbons-sprite, .ribbons-exclusive, .ribbons-featured { display: inline-block; text-indent: -9999px; }
why lastly selector list include classes, not '.ribbons-sprite'? can see if had more items in sprite unnecessarily bloated. seems case when using sprite generator. if remove line, inline block , text indent lines under shared class name selector. here expected css output:
.ribbons-sprite { background: url('../images/ribbons-scfb85024fb.png') no-repeat; display: inline-block; text-indent: -9999px; } .ribbons-exclusive { background-position: 0 -38px; height: 59px; width: 59px; } .ribbons-featured { background-position: 0 0; height: 38px; width: 70px; }
css sass compass-sass sprite
Comments
Post a Comment