我如何从这个 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

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

当尝试将变量值连接到一个字符串并将连接的字符串作为输出时，您应该将整个内容放在引号内，如下所示。注意当您将整个内容放在引号内时，Less 会打印带有我们不需要的引号的输出值，因为我们会在选择器中使用它。因此，我们应该使用 ~() 或 e() 函数从输出中去除引号。
```
@item:~".span-@{outer-index}-of-@{max-grid}";
```
其次，在选择器插值中使用变量动态形成选择器时，变量应采用 @{variable-name} 形式（在大括号内），因此对于您的情况，它应该是修改成如下： <pre>@{item} .row:first-of-type @{item} { color: blue; }

最后，如果我们进行上面第 2 点中提到的相同更改（由于使用了选择器插值），Eric would/should 之前建议的方法也有效。但是，当整个选择器嵌套在另一个 parent 中时，&（parent 选择器）总是意味着整个 parent 到 top-most 级别，因此它可能无法在所有情况下都按预期工作。

例如，考虑如下嵌套场景：

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

编译时，上面的代码会产生以下内容 CSS。在这里我们可以看到 .foo parent 如何出现在开始和结束处。

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

我如何从这个 Less 代码中提取重复的选择器？

How do I abstract repetitive selector from this Less code?

css

less