Reusing nested classes in LESS for sprite icon reuse - css

Question

I have a .less file that contains classes to manage my sprites, such as:
.icon-16 {
background: url('/Content/images/app/icons-16.png') no-repeat top left;
width: 16px;
height: 16px;
&.about { background-position: 0px 0px; }
&.add { background-position: 0px -16px; }
&.add2 { background-position: 0px -32px; }
}
Later on in another .less file that is being linked, I need to set background images using these sprites.
I know it is possible to reuse a class like this:
.myClass {
.mySharedClass;
}
However I'm unable to work out the correct syntax to reuse a class in a nested hierarchy.
What I would like to do is something like the following:
.myClass {
.icon-16.about;
}
Giving the following output (from both .icon-16 and .about):
.myClass {
background: url('/Content/images/app/icons-16.png') no-repeat top left;
width: 16px;
height: 16px;
background-position: 0px 0px;
}
However this doesn't compile.
How can I achieve this nested class reuse?
If what I'm trying to do is not possible, what would be the best alternative to allow my
sprites to be used in other classes?

Answer 1

Specific Solution in This Case
I recommend making a master mixin to generate what you need, as you need it. Here is a solution that works with your current version of LESS 1.3.1:
LESS
.make-icon-16(#form: all) {
background: url('/Content/images/app/icons-16.png') no-repeat top left;
width: 16px;
height: 16px;
#about: 0px 0px;
#add: 0px -16px;
#add2: 0px -32px;
.makePositioning() when (#form = all) {
&.about { background-position: #about; }
&.add { background-position: #add; }
&.add2 { background-position: #add2; }
}
.makePositioning() when (#form = about) {
background-position: #about;
}
.makePositioning() when (#form = add) {
background-position: #add;
}
.makePositioning() when (#form = add2) {
background-position: #about;
}
.makePositioning();
}
//to generate icon classes
.icon-16 {
.make-icon-16;
}
//to include as you want in your class
.myClass {
.make-icon-16(about);
}
CSS Output
.icon-16 {
background: url('/Content/images/app/icons-16.png') no-repeat top left;
width: 16px;
height: 16px;
}
.icon-16.about {
background-position: 0px 0px;
}
.icon-16.add {
background-position: 0px -16px;
}
.icon-16.add2 {
background-position: 0px -32px;
}
.myClass {
background: url('/Content/images/app/icons-16.png') no-repeat top left;
width: 16px;
height: 16px;
background-position: 0px 0px;
}
If you don't need or want the actual .icon-16 classes, skip the step that makes those as it is not necessary for you to do that.
More General Solution?
If your icons have the right logic to them, then this can be more generalized to accommodate any size icon.
LESS
.make-icon(#form: all, #size: 16) {
background: url('/Content/images/app/icons-#{size}.png') no-repeat top left;
width: #size*1px;
height: #size*1px;
#about: 0px 0px;
#add: 0px (#size*-1px);
#add2: 0px (#size*-2px);
.makePositioning() when (#form = all) {
&.about { background-position: #about; }
&.add { background-position: #add; }
&.add2 { background-position: #add2; }
}
.makePositioning() when (#form = about) {
background-position: #about;
}
.makePositioning() when (#form = add) {
background-position: #add;
}
.makePositioning() when (#form = add2) {
background-position: #about;
}
.makePositioning();
}
//to generate icon classes for 32px size
.icon-32 {
.make-icon(all, 32);
}
CSS Output
.icon-32 {
background: url('/Content/images/app/icons-32.png') no-repeat top left;
width: 32px;
height: 32px;
}
.icon-32.about {
background-position: 0px 0px;
}
.icon-32.add {
background-position: 0px -32px;
}
.icon-32.add2 {
background-position: 0px -64px;
}