Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
An approach to manage icons using mixins(LessCSS) and CSS Sprites
/*
*
* Icon index
* by @dic7 (github: ivanmendoza)
*
*/
/*
* SPRITE
* url: ../images/icons.png
* Col #: Different icon
* Row 1: normal view
* Row 2: hover view
* Row 3: active view
*/
/*
* HTML
* <a href="#" class="button"><span class="icon"><span> Text</a>
*
* USE
* .button{
* #icons .sample1;
* #icons .left;
* }
*/
@dirImages: "../images";
@icon_w: 16px; // width
@icon_h: 16px; // height
#icons{
.shape(@posX: 0, @posY: 0){
display: block;
width: @icon_w;
height: @icon_h;
margin-top: 0;
background: url("@{dirImages}/icons.png") no-repeat @posX*@icon_w*-1 @posY*@icon_h*-1;
}
.left{
.icon{
float: left;
clear: none;
margin-right:.5em;
}
}
.right{
.icon{
float: right;
clear: none;
margin-left: .5em;
}
}
.sample1{
.icon{#icons .shape(0, 0);}
&:hover, &:focus{
.icon{#icons .shape(0, 1);}
}
&.active{
.icon{#icons .shape(0, 2);}
}
}
.sample1{
.icon{#icons .shape(1, 0);}
&:hover, &:focus{
.icon{#icons .shape(1, 1);}
}
&.active{
.icon{#icons .shape(1, 2);}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.