Skip to content

Instantly share code, notes, and snippets.

@ginader
Created November 30, 2012 00:10
Show Gist options
  • Save ginader/4172816 to your computer and use it in GitHub Desktop.
Save ginader/4172816 to your computer and use it in GitHub Desktop.
optimizing the class names of sprites
@import "compass";
$flags-spacing: 50px;
$flags-position: 50%;
$flags-sprite-base-class: ".flags li";
@import "flags/*.png";
$sprites: sprite-map("flags/*.png");
@each $sprite in sprite-names($sprites){
.#{$sprite}{
background-position: sprite-position($sprites, $sprite);
height: image-height(sprite-file($sprites, $sprite));
width: image-width(sprite-file($sprites, $sprite));
}
}
.flags li {
background: url('../images/flags-s70f18acadb.png') no-repeat;
}
.argentina {
background-position: 0 0;
height: 14px;
width: 14px;
}
.austria {
background-position: 0 -27px;
height: 15px;
width: 15px;
}
.belgium {
background-position: 0 -14px;
height: 13px;
width: 20px;
}
@import "compass";
$flags-spacing: 50px;
$flags-position: 50%;
$flags-sprite-base-class: ".flags li";
// something this property would be super useful:
$flags-sprite-prefix: ""; // to clear the standard "flags-" before every class name
// or change the prefix to something like "blah_" if so desired
@import "flags/*.png";
@include all-flags-sprites;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment