Css 较少的“混合”；背景位置“；隔离x和y值的步骤

我正在为我的工作编写的应用程序使用自定义单选按钮精灵表。我已经在逻辑上将这个精灵表拆分为列和行-列和行与单选按钮可以具有的特定状态相对应。（列是状态，如禁用，应用程序状态，如“正确”或“不正确”，而行是选定状态和悬停/焦点状态

我的实现使用动态添加的语义类来影响背景位置。因此，如果一个单选按钮被标记为“正确”且具有焦点，则将应用一个“正确”的CSS类和一个“焦点”类，分别调用列和行的背景位置

对于这些类，我目前正在使用

background-position-x

和

background-position-y

CSS属性，它们在IE和chrome中工作，但在Firefox和Opera中不工作。（这两个属性不是任何CSS规范的正式组成部分。）由于我们使用较少的预处理器，我想知道是否有一种方法可以创建较少的mixin，它将动态地“继承”“background position”属性的x或y值

在psuedocode中，类似以下内容：

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

（这不是真正准确的语法，但我希望它能传达这个想法。）

这在LESS中可能吗？LESS可以像这样存储变量和目标属性吗

---

谢谢！

这样继承的

值不能少，而
背景位置本身只能
继承CSS级联中的这两个值。我认为可能的“简单”解决方案是以下代码。注意：由于我不知道您的精灵位置，为了在此进行说明，我假设如下：

您的列宽为10px，顺序为a）基本图像，b）禁用的
图像，c）纠正的
图像，以及d）纠正的
图像

您的行高为10px，顺序为a）基本图像，b）悬停和
.focus
图像（在我的示例中相同；不确定您的真实情况）
“基本”和禁用的
设置不需要
：悬停
或
焦点
值
给出这些假设，然后使用具有水平（X）和垂直（Y）移位量的混合，以及精灵中列和行位置的传入乘数，可以为我们提供以下代码（您应该能够在我的假设错误的地方修改这些代码）：

代码更少

输入[类型=收音机]{
//bkg位置设置混合
.setBkgPos（@X:0，@Y:0）{
@X档：-10px；
@YSShift:-10px；
背景位置：（@Xshift*@X）（@Yshift*@Y）；
}
.kgpos；
&[disabled=“disabled”]{
.setBkgPos（1,0）；
}    
&.对{
.setBkgPos（2,0）；
&：悬停和聚焦{
.2.1（2,1）；
}
}
&.不正确{
.setBkgPos（3,0）；
&：悬停和聚焦{
.1（3,1）；
}
}
}

CSS示例输出

输入[类型=收音机]{
背景位置：0px 0px；
}
输入[type=radio][disabled=“disabled”]{
背景位置：-10px 0px；
}
输入[type=radio]。正确{
背景位置：-20px 0px；
}
输入[type=radio]。正确：悬停，
输入[type=radio].correct.focus{
背景位置：-20px-10px；
}
输入[type=radio]。不正确{
背景位置：-30px 0px；
}
输入[type=radio]。不正确：悬停，
输入[type=radio]。不正确。焦点{
背景位置：-30px-10px；
}
这样继承的值不能少于
值，而
背景位置本身只能
继承CSS级联中的两个值。我认为一个可能的“简单”解决方案是下面的代码。注意：由于我不知道您的精灵位置，为了在此进行说明，我假设如下：

您的列宽为10px，顺序为a）基本图像，b）禁用的
图像，c）纠正的
图像，以及d）纠正的
图像

您的行高为10px，顺序为a）基本图像，b）悬停和
.focus
图像（在我的示例中相同；不确定您的真实情况）
“基本”和禁用的
设置不需要
：悬停
或
焦点
值
给出这些假设，然后使用具有水平（X）和垂直（Y）移位量的混合，以及精灵中列和行位置的传入乘数，可以为我们提供以下代码（您应该能够在我的假设错误的地方修改这些代码）：

代码更少

输入[类型=收音机]{
//bkg位置设置混合
.setBkgPos（@X:0，@Y:0）{
@X档：-10px；
@YSShift:-10px；
背景位置：（@Xshift*@X）（@Yshift*@Y）；
}
.kgpos；
&[disabled=“disabled”]{
.setBkgPos（1,0）；
}    
&.对{
.setBkgPos（2,0）；
&：悬停和聚焦{
.2.1（2,1）；
}
}
&.不正确{
.setBkgPos（3,0）；
&：悬停和聚焦{
.1（3,1）；
}
}
}

CSS示例输出

输入[类型=收音机]{
背景位置：0px 0px；
}
输入[type=radio][disabled=“disabled”]{
背景位置：-10px 0px；
}
输入[type=radio]。正确{
背景位置：-20px 0px；
}
输入[type=radio]。正确：悬停，
输入[type=radio].correct.focus{
背景位置：-20px-10px；
}
输入[type=radio]。不正确{
背景位置：-30px 0px；
}
输入[type=radio]。不正确：悬停，
输入[type=radio]。不正确。焦点{
背景位置：-30px-10px；
}
Heyyyy……真聪明！我知道你在那里做了什么，使用了子类。这不是真正的理想（从西奥那里）