Question

我有一种情况需要指定给定选择器的第n个实例和所有后续兄弟。所以我有这个：

td:nth-child(n + 2)
{
    width: 125px;
}

但我做了很多这样的事情，使用不同的选择器和不同的偏移量，重复nth-child(n + offset)是乏味的，并且模糊了代码的意图。

我更愿意这样做：

.self-and-siblings(@selector; @offset)
{
  ~'@{selector}:nth-child(n + @{offset})';
}

然后像这样调用它：

.self-and-siblings('td', 2)
{
    width: 125px;
}

但这并没有编译。是否有可能实现我的需要？

Answer 1

Less没有任何可以返回值的 true 函数。另外，mixin只能在选择器块（自己的选择器或父选择器）内输出内容。在您的情况下，只有一个字符串打印，但它没有分配给任何选择器块中的任何属性（或）。

对于您的情况，您可以编写一个非常简单的mixin，如下所示并使用它：

.nth-child-mixin(@offset, @props){
  &:nth-child(n + @{offset}){
    @props();
  }
}
td{
  .nth-child-mixin(3, {
    color: red;
  });
}
td{
  .nth-child-mixin(5, {
    color: blue;
  });
}

以上nth-child-mixin会将offset和应分配的属性作为输入。属性是detached ruleset，然后从第n个子选择器块中调用。编译的CSS输出如下所示：

td:nth-child(n + 3) {
  color: red;
}
td:nth-child(n + 5) {
  color: blue;
}

更全面的mixin如下所示，因为您也可以将n的乘数传递给它。

.nth-child-mixin(@multiplier, @offset, @props){
  &:nth-child(@{multiplier}n + @{offset}){
    @props();
  }
}
td{
  .nth-child-mixin(2, 5, {
    color: blue;
  });
}

在这种情况下编译的CSS将如下：

td:nth-child(2n + 5) {
  color: blue;
}

我觉得使用分离的规则集会让它更清晰但是如果你想让mixin只输出一个选择器，你可以将mixin定义如下。唯一的缺点是，当您在同一嵌套中需要多个此类块时，可能偶尔会遇到范围问题。

.nth-child-mixin(@multiplier, @offset){
  @sel: ~":nth-child(@{multiplier}n + @{offset})";
}
td{
  .nth-child-mixin(1, 3);
  &@{sel}{
    color: red;
  }
}
td{
  .nth-child-mixin(2, 5);
  &@{sel}{
    color: blue;
  }
}

例如，如果你想在同一td嵌套中写下两个nth-child选择器，那么由于范围，延迟加载等原因，它不会产生预期的输出。

td{
  .nth-child-mixin(1, 3);
  &@{sel}{
    color: red;
  }
  .nth-child-mixin(3, 5);
  &@{sel}{
    color: red;
  }
}

这将推动你使用匿名选择器框，如下面的示例，以解决范围问题（这些黑客很糟糕）。

td{
  & {
    .nth-child-mixin(1, 3);
    &@{sel}{
      color: red;
    }
  }
  &{
    .nth-child-mixin(3, 5);
    &@{sel}{
      color: red;
    }
  }
}

有没有办法从LESS中的函数或变量中指定选择器？

1 个答案: