css - 减少 "background-position"的 Mixin 以隔离 x 和 y 值

Question

我正在为我为工作编写的应用程序使用自定义单选按钮 spritesheet。我已将此 spritesheet 逻辑拆分为列和行 - 列和行对应于单选按钮可以具有的特定状态。 (列是状态，例如禁用和应用程序状态，例如“正确”或“不正确”，而行是选定状态和悬停/焦点状态。

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

对于这些类，我目前正在使用 background-position-x 和 background-position-y CSS 属性，它们在 IE 和 chrome 中有效，但在 Chrome 中无效在 Firefox 和 Opera 中。 (这两个属性不是任何 CSS 规范的正式部分。)由于我们使用的是 LESS 预处理器，我想知道是否有一种方法可以创建一个 LESS mixin，它会动态地“继承”一个 x 或 y 值“背景位置”属性。

在伪代码中，是这样的:

.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 可以这样存储变量和目标属性吗？

谢谢!

Answer 1

您不能以这种方式拥有 LESS inherit 值，background-position 本身只能inherit CSS 级联中的两个值。我认为一个可能的“简单”解决方案是以下代码。注意:由于我不知道您的 sprite 定位，为了便于说明，我假设如下:

1. 您的列宽 10 像素，顺序为 a)“基本”图像，b)您的已禁用图像，c)您的.correct图像，以及d) 你的.incorrect 图片。
2. 您的行高 10 像素，顺序为 a) “基本”图像，以及 b) 您的悬停图像和 .focus 图像(在我的示例中是相同的；不确定你的真实情况)。
3. 您的“基本”和禁用 设置不需要:hover 或.focus 值。

鉴于这些假设，然后使用具有水平 (X) 和垂直 (Y) 移位量的混合，并为 sprite 中的列和行位置传递一个乘数，可以给我们这个代码(你应该是能够在我的假设错误的地方进行修改):

更少的代码

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 示例输出

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