Less 减：组合选择器变量_Less

Less 减：组合选择器变量

less

Less 减：组合选择器变量,less,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: ~"@{tit

鉴于我想简化以下代码：

@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？是否有一种不同的方式组合选择器变量，然后使用&:after？

（几乎是从更广的范围复制粘贴）

您的尝试有两个问题：

根据定义，的内容根本不是任何评估的主题，因此逗号（以及任何其他特殊行动）在这里没有任何意义

选择器中的变量插值假定单个插值变量仅包含单个选择器元素。因此，严格地说，即使是

~“h1.someclass>a”

也不过是一种黑客行为，除了极为琐碎的情况外，预计会产生副作用和未指定/未定义的行为

因此，在您的代码中，

@titles

的值就像一个简单/单一的选择器元素一样工作（例如，与

body

相同）

也就是说，概括而言，应尽可能避免“基于字符串的选择器操作”（如

~“@{title1}，@{title2}”

），因为在较少的情况下，选择器不是字符串，字符串也不是选择器（它们也不会自动相互转换，但在某些极其琐碎的情况下除外）

到目前为止，在Less中定义可重用选择器列表的唯一非黑客方法是mixin（mixin也可以被视为“变量”，即使它们有另一种语法），该方法将任意一组规则放入具有所述列表作为其选择器的规则集中。例如，对于上面的示例，它将类似于：

@title1:~“h1.someclass>a”；
@标题2:~“h1.otherclass>a”；
.标题（@规则）{
@{title1}，@{title2}{@rules（）；}
}
//用法：
.头衔({
&：之后{
显示：无；
}
});

（几乎从较宽的位置复制粘贴）