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);
        }
    }

}