The comments on other answers helped make it clear that the .sprite
usage is actually not part of LESS, but is a mixin definition, as follows. So the extra stuff in the variable definition is not used in the sprite at all, but exists for other uses.
.sprite-width(@sprite) {
width: ~`"@{sprite}".split(', ')[4]`;
}
.sprite-height(@sprite) {
height: ~`"@{sprite}".split(', ')[5]`;
}
.sprite-position(@sprite) {
@sprite-offset-x: ~`"@{sprite}".split(', ')[2]`;
@sprite-offset-y: ~`"@{sprite}".split(', ')[3]`;
background-position: @sprite-offset-x @sprite-offset-y;
}
.sprite-image(@sprite) {
@sprite-image: ~`"@{sprite}".split(', ')[8].slice(1, -2)`;
background-image: url(@sprite-image);
}
.sprite(@sprite) {
.sprite-image(@sprite);
.sprite-position(@sprite);
.sprite-width(@sprite);
.sprite-height(@sprite);
}