Reduce sprite CSS with LESS? - css

Question

The repition of code needed to produce CSS sprite effects seems to be a perfect case for the use of LESS.
But other than standardising the base ,hover and active increments (below) I can't see any further way to reduce the lines of code needed.
Can anyone suggest futher improvements:
#sprite-base:0px;
#sprite-hover:20px;
#sprite-active:40px;
.zone-user .region-user-second ul.text-size li.one a {
background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px #sprite-base transparent;
}
.zone-user .region-user-second ul.text-size li.two a {
background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px #sprite-base transparent;
}
etc ...
.zone-user .region-user-second ul.text-size li.one a:hover {
background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px #sprite-base - #sprite-hover transparent;
}
.zone-user .region-user-second ul.text-size li.two a:hover {
background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px #sprite-base - #sprite-hover transparent;
}
.zone-user .region-user-second ul.text-size li.one a.active {
background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px #sprite-base - #sprite-active transparent;
}
.zone-user .region-user-second ul.text-size li.two a.active {
background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px #sprite-base - #sprite-active transparent;
}
etc ...

Answer 1

You are failing to take advantage of one of the greatest features of LESS which is nesting your rules. It makes it easier to identify what is going on and in my opinion it is easier to read. Also you do write considerably less code. Here is how I would nest the rules you have shown in your question:
#sprite-base:0px;
#sprite-hover:20px;
#sprite-active:40px;
.zone-user .region-user-second ul.text-size li a {
background: url("../img/sprite-accessibility.gif") no-repeat scroll transparent;
&.one {
background-position: 0px #sprite-base;
&:hover {
background-position:0px (#sprite-base - #sprite-hover);
}
&.active {
background-position:0px (#sprite-base - #sprite-active);
}
}
&.two {
background-position:-25px #sprite-base;
&:hover {
background-position:-25px (#sprite-base - #sprite-hover);
}
&.active {
background-position:-25px (#sprite-base - #sprite-active);
}
}
}

Answer 2

Well this is what i would do. ( without LESS ..or More.. )
Working example: http://jsfiddle.net/lollero/gE7df/
CSS:
.Element {
background-image: url('path/to/img.jpg');
background-repeat: no-repeat;
}
.E-1 { background-position: 0px 0px; }
.E-1:hover { background-position: -20px 0px; }
.E-2 { background-position: 0px -25px; }
.E-2:hover { background-position: -20px -25px; }
.E-3 { background-position: 0px -55px; }
.E-3:hover { background-position: -20px -55px; }
HTML:
<div class="Element E-1"></div>
<div class="Element E-2"></div>
<div class="Element E-3"></div>
Edit: I think I had a brain fart or something.. I fixed a huge error in my css example.