Question

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

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

对于这些课程，我目前正在使用background-position-x和background-position-y CSS属性，这些属性适用于IE和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吗？可以减少存储变量和目标属性吗？

谢谢！

Answer 1

您不能以这种方式获得inherit个值，而background-position本身在CSS级联中只能inherit这两个值。我认为可能的“简单”解决方案是以下代码。注意：由于我不知道你的精灵定位，为了说明这里，我假设以下：

您的专栏是10px宽，大约是a）“基础”图片，b）您的disabled图片，c）您的.correct图片，以及d）您的{{1} } image。
您的行高10px，大小为a）“基础”图片，b）您的悬停和.incorrect图片（在我的示例中相同;不确定您的实际情况）
您的“基础”和.focus设置不需要disabled或:hover值。

考虑到这些假设，然后使用具有水平（X）和垂直（Y）移位量的mixin，以及精灵中的列和行位置的传入乘数，可以给我们这个代码（你应该是能够在我的假设错误的地方进行修改）：

LESS代码

.focus

CSS示例输出

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

Lessin用于“背景位置”以隔离x和y值

1 个答案: