Less Mixin for "background-position" to isolate x and y values - css

Question

I'm using a custom radio button spritesheet for an application that I'm writing for my work. I've split up this spritesheet logically into columns and rows - the columns and rows correspond with specific states that the radio button can have. (The columns are states, such as disabled, and application states, such as "correct" or "incorrect", while the rows are for selected states and hover/focus states.
My implementation uses dynamically-added semantic classes to influence the background position. As such, if a radiobutton is marked "correct" and it has focus, a "correct" CSS class will be applied and a "focus" class will be applied, calling the background position for the column and row respectively.
For these classes, I'm currently using the background-position-x and background-position-y CSS attributes, which work in IE and chrome, but not in Firefox and Opera. (These two properties aren't officially part of any CSS spec.) Since we're using the LESS preprocessor, I want to know if there's a way to create a LESS mixin that will dynamically "inherit" an x or y value for the "background-position" property.
In psuedocode, something like this:
.my-background-mixin-x(#value) {
background-position: #value + 'px', inherit; (inherit y-value)
}
.my-background-mixin-y(#value) {
background-position: inherit, #value + 'px'; (inherit x-value)
}
(That's not really accurate syntax, but I hope it conveys the idea.)
Is this possible in LESS? Can less store variables and target properties like this?
Thanks!

Answer 1

You cannot have LESS inherit values that way, and background-position itself can only inherit both values in the CSS cascade. I think a possible "easy" solution would be the following code. Note: Since I do not know your sprite positioning, for the sake of illustration here, I have assumed the following:
Your columns are 10px wide and are in the order of a) a "base" image, b) your disabled image, c) your .correct image, and d) your .incorrect image.
Your rows are 10px tall and are in the order of a) a "base" image, and b) your hover and .focus image (which are the same in my example; not sure about your real situation).
That your "base" and disabled settings do not require a :hover or .focus value.
Given those assumptions, then using a mixin with a horizontal (X) and vertical (Y) shift amount, with a passed in multiplier for the column and row position in the sprite, can give us this code (which you should be able to modify in such places where my assumptions were wrong):
LESS Code
input[type=radio] {
// bkg position set mixin
.setBkgPos(#X: 0, #Y: 0) {
#Xshift: -10px;
#Yshift: -10px;
background-position: (#Xshift * #X) (#Yshift * #Y);
}
.setBkgPos;
&[disabled="disabled"] {
.setBkgPos(1, 0);
}
&.correct {
.setBkgPos(2, 0);
&:hover, &.focus {
.setBkgPos(2, 1);
}
}
&.incorrect {
.setBkgPos(3, 0);
&:hover, &.focus {
.setBkgPos(3, 1);
}
}
}
CSS Example Output
input[type=radio] {
background-position: 0px 0px;
}
input[type=radio][disabled="disabled"] {
background-position: -10px 0px;
}
input[type=radio].correct {
background-position: -20px 0px;
}
input[type=radio].correct:hover,
input[type=radio].correct.focus {
background-position: -20px -10px;
}
input[type=radio].incorrect {
background-position: -30px 0px;
}
input[type=radio].incorrect:hover,
input[type=radio].incorrect.focus {
background-position: -30px -10px;
}