Skip to content

Instantly share code, notes, and snippets.

@cfurrow
Created September 21, 2011 15:14
Show Gist options
  • Save cfurrow/1232323 to your computer and use it in GitHub Desktop.
Save cfurrow/1232323 to your computer and use it in GitHub Desktop.
LESS CSS is cool
// rating-stars mixin
.stars(@stars:0){
@height:19px;
display:inline-block; // make sure it's some type of block element
height:@height;
width:110px;
background-image:url(../images/star-ratings-small.png);
background-position: 0px @stars*-@height;
background-repeat: no-repeat;
}
.star-5{
.stars(5);
}
.star-4{
.stars(4);
}
.star-3{
.stars(3);
}
.star-2{
.stars(2);
}
.star-1{
.stars(1);
}
.star-0{
.stars(0);
}
<ul>
<li>
Thing 1
<span class='star-5'></span>
</li>
<li>
Thing 2
<span class='star-2'></span>
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment