Converting from width to background-width in Less for sprites within CSS class - css

Question

I'm new to advanced CSS and I've been following this tutorial for generating sprites using gruntjs, spritesmith and less. I'm stuck on how to solve the following problem. Firstly, I generate a .less file containing the information of each image inside the sprite. It looks something like this:
#mobile_logout-x: 1586px;
#mobile_logout-y: 0px;
#mobile_logout-offset-x: -1586px;
#mobile_logout-offset-y: 0px;
#mobile_logout-width: 256px;
#mobile_logout-height: 256px;
Using grunt-contrib-less I can now use the following to get the sprite into my target css:
Less template
.mobile_logout {
.sprite(#mobile_logout);
}
Result
.mobile_logout {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
}
This would be fine if I wanted to use this directly in the HTML, but I'd like to specify this as part of another CSS class. An example would be:
.myTestButton {
background-image: url(images-mobile/mobile-sprite.png);
background-position: -1586px 0px;
width: 256px;
height: 256px;
color: white;
background-size: 1.3em 1.3em;
background-position: top right;
}
The problem is at this stage I can't find a way to get the width and height to be represented as background-width and background-height, which is where I am looking to get to.
I've tried changing the values in the sprite.less file to match what I'm looking for, but have found that was a hack that didn't work. Another option I have been considering is having a mixin to return the correct item with the width translated, but because these are generated from less I couldn't get that to fly either.

Answer 1

Just after posting this I looked into where the sprite function came from and found my answer in the generated sprite.less file:
.sprite-width(#sprite) {
width: ~`"#{sprite}".split(', ')[4]`;
}
.sprite-height(#sprite) {
height: ~`"#{sprite}".split(', ')[5]`;
}
The sprite.less file is generated using a mustache template. In order to solve my problem in Spritesmith you can specify a mustache template. It was also incorrect that I was looking at background-width and the property I needed was background-size. My attempts at inlining also failed, and I should have been looking at using a div rather than sizing the sprite component.