Question

有没有解决方案使用LESS为IE8生成偶数/奇数规则？我需要对列表中的偶数和奇数项有单独的规则。像这样：

li.item:first-child {}
li.item:first-child + li {}
li.item:first-child + li + li {}
li.item:first-child + li + li + li {}

我决定使用LESS来生成这个规则，因为我必须为它定义30多个规则。这是我抛出错误的代码：

@iterations: 5;
@liaddon: ~" + li";

.li-loop (@i) when (@i > 0) { 
    li.item:first-child@{liaddon} * @i{}
    .li-loop(@i - 1);
}
.li-loop(0) {};
.li-loop (@iterations);

感谢您的帮助！

Answer 1

这不是解决此问题的正确方法。我认为你最好用不同的风格创建一个.even类和一个.odd类。然后将其应用于您的标记。

根据框架（MVC等），您使用的是相对简单的过程。最糟糕的情况是，您可以使用jQuery来应用类名。

Answer 2

一个更简单的解决方案可能就是这个混合：

.li-loop (@i) when (@i > 0) {
    & + li {
      .li-loop(@i - 1);
      & {
        content: 'something'
      }
    }
}

您可以在要扩展的选择器内调用：

li.item:first-child {
  .li-loop (3);
}

这将生成以下CSS：

li.item:first-child + li {
  content: 'something';
}
li.item:first-child + li + li {
  content: 'something';
}
li.item:first-child + li + li + li {
  content: 'something';
}

应用相同样式的另一种方法是使用:extend：

.li-loop (@i) when (@i > 0) {
    & + li {
      .li-loop(@i - 1);
      &:extend(li.item:first-child); // it will match this selector only
    }
}

在调用mixin的同一个块中添加样式属性：

li.item:first-child {
  .li-loop (3);
  color: blue;
}

这将生成以下CSS：

li.item:first-child,
li.item:first-child + li,
li.item:first-child + li + li,
li.item:first-child + li + li + li {
  color: blue;
}

<强>更新

如果您需要为每个选择器应用不同的规则集，那么循环就不是可行的方法。使用Less的最佳方法是嵌套选择器：

li.item:first-child {
  color: black;
  + li {
    color: red;
    + li {
      color: green;
      + li {
        color: yellow;
        + li {
          color: orange;
        }
      }
    }
  }
}

将生成以下CSS：

li.item:first-child {
  color: black;
}
li.item:first-child + li {
  color: red;
}
li.item:first-child + li + li {
  color: green;
}
li.item:first-child + li + li + li {
  color: yellow;
}
li.item:first-child + li + li + li + li {
  color: orange;
}

较少的CSS在循环中插入字符串

2 个答案: