1

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

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

对于这些类，我目前使用background-position-x和background-position-yCSS 属性，它们在 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中可能吗？less 可以这样存储变量和目标属性吗？

谢谢！

4

1 回答 1

1

你不能以inherit这种方式拥有 LESS 值，并且background-position它本身只能inherit在 CSS 级联中使用这两个值。我认为可能的“简单”解决方案是以下代码。注意：由于我不知道你的精灵定位，为了说明起见，我假设如下：

  1. 您的列宽 10 像素，顺序为 a）“基本”图像、b）您的disabled 图像、c）您的.correct图像和 d）您的.incorrect图像。
  2. 您的行高 10 像素，顺序为 a）“基本”图像，b）悬停和.focus图像（在我的示例中是相同的；不确定您的实际情况）。
  3. 您的“基础”和disabled设置不需要:hover或.focus值。

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

更少的代码

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;
}
于 2012-07-27T04:25:10.560 回答