如何从此Less代码中抽象重复选择器？

Question

我有许多可重复的Less代码块 - 这是一个简单的例子：

.span-@{outer-index}-of-@{max-grid} .row:first-of-type .span-@{outer-index}-of-@{max-grid}

如您所见，第一部分和最后一部分完全相同。

我一直在尝试研究如何创建@item变量并以下列方式使用它，但由于语法问题而无法编译代码：

@item:.span-@{outer-index}-of-@{max-grid};

@item .row:first-of-type @item {}

有人帮忙吗？

Answer 1

运气好吗？

@item {
    & .row:first-of-type & {}
}

Answer 2

您尝试的代码存在一些小问题，但总的来说，您处于正确的路径上。进行以下更正可以解决问题。

1. 当尝试将变量值连接到字符串并将连接字符串作为输出时，您应该将整个内容放在引号内，如下所示。 注意，当您将整个内容放在引号内时，Less会使用我们不需要的引号打印输出值，因为我们将在选择器中使用它。因此，我们应该使用~()或e()函数从输出中去除引号。

   @item:~".span-@{outer-index}-of-@{max-grid}";

2. 其次，在选择器插值中使用变量动态形成选择器时，变量的形式应为@{variable-name}（花括号内），因此对于您的情况，应将其修改为下面：

   @{item} .row:first-of-type @{item} {
       color: blue;
   }

最后，如果我们进行与上面第2点中提到的相同的更改（由于使用了选择器插值），Eric早先建议的方法将/应该也可以工作。但是，当整个选择器嵌套在另一个父级中时，&（父选择器）将始终意味着整个父级到达最顶级，因此它可能无法按预期工作。

例如，考虑如下的嵌套方案：

.foo{
    @{item} {
        & .row:first-of-type & {foo:bar;}
    }
}

编译时，上面会生成以下CSS。在这里，我们可以看到.foo父母在开始和结束时是如何来的。

.foo .span-1-of-3 .row:first-of-type .foo .span-1-of-3 {
  foo: bar;
}