What are the parameters in this LESS sprite shorthand specification? - css

Question

I'm fairly new to LESS, and I have some code--which seems to work--for a sprite given to me that looks like this. First a variable is defined as follows:
#my_img: 0px 105px 0px -105px 22px 22px 44px 150px 'sprites/sprite-img.png';
This variable gets used like this:
.someClass {
.sprite(#my_img);
}
CSS output of this looks like this:
.someClass{
background-image: url("sprites/sprite-img.png");
background-position: 0 -105px;
height: 22px;
width: 22px;
}
What do the parameters in that variable definition indicate? The last one (url) is obvious, and I believe from looking at the sprite that the 3rd and 4th ones seem to be the background position offsets (X and Y). But what are the others? What do each of the 9 elements in this variable specify?
?
?
horizontal position
vertical position
width
height
?
?
background-image url

Answer 1

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