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

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 只能在选择器 block (它自己的选择器或父选择器)内输出内容。在您的情况下，只有一个字符串 print 但它没有分配给任何选择器 block 中存在的任何属性(或)。

对于您的情况，您可以像下面这样编写一个非常简单的 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 个子选择器 block 中调用它。编译后的 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;
}

---

我觉得使用分离的规则集会更清晰，但如果您希望混入只输出一个选择器，您可以按如下方式定义混入。唯一的缺点是当您在同一嵌套中需要多个这样的 block 时，您可能偶尔会遇到范围界定问题。

.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 嵌套中编写两个如下所示的第 n 个子选择器，那么由于范围、延迟加载等原因，它不会产生预期的输出。

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

这会促使您像下面的示例一样使用匿名选择器框来解决范围问题(这些 hack 非常糟糕)。

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