Question

鉴于我想简化以下LESS代码：

@title1: ~"h1.someclass > a";
@title2: ~"h1.otherclass > a";

@{title1},@{title2} {
  &:after {
    display: none;
  }
}

评估为：

h1.someclass > a:after,
h1.otherclass > a:after {
  display: none;
}

我尝试使用

合并这些类

@titles: ~"@{title1},@{title2}"; // Combine selectors for easier code
@{titles} {
  &:after {
    display: none;
  }
}

然而，这会产生不同的CSS。

h1.someclass > a,h1.otherclass > a:after {
  display: none;
}

这是由于变量的延迟评估吗？如果是这样，为什么它会以这种方式产生CSS？有没有一种不同的方法来组合选择器变量，以后使用＆amp;：after？

Answer 1

（几乎从更广泛的https://stackoverflow.com/a/23954580/271274复制粘贴）

您的尝试存在两个问题：

根据定义，escaped strings的内容根本不是任何评估的主题，因此逗号（以及任何其他特殊操作）在那里没有任何意义。
选择器中的可变插值假定单个插值变量仅包含单个选择器元素。因此，严格地说，即使~"h1.someclass > a"已经只是一个黑客，但是除了极其微不足道的情况之外，任何东西都会产生副作用和未指明/未定义的行为。

因此，在上面的代码中，@titles的值就像一个简单/单个选择器元素一样（例如，与body相同）。

即。总的来说，＆＃34;基于字符串的选择器操作＆＃34; （如~"@{title1}, @{title2}"）应该尽可能避免，因为在Less 选择器不是字符串而字符串不是选择器（它们也不会自动转换为彼此，除非在某些非常微不足道的情况下例）。

到目前为止，在Less中定义可重用的选择器列表的唯一非hackish方法是mixin（mixins可以被认为是＆＃34;变量＆＃34;即使它们有另一种语法也是如此）放置任意集合将规则放入具有所述列表作为其选择器的规则集中。例如。对于上面的示例，它将类似于：

@title1: ~"h1.someclass  > a";
@title2: ~"h1.otherclass > a";

.titles(@rules) {
    @{title1}, @{title2} {@rules();}
}

// usage:

.titles({
    &:after {
        display: none;
    }
});

Demo

减：组合选择器变量

1 个答案: