是否可以在 LESS 变量中引用父选择器？答案

【问题标题】：Is it possible to reference a parent selector in a LESS variable?是否可以在 LESS 变量中引用父选择器？
【发布时间】：2015-03-11 01:14:05
【问题描述】：

我正在尝试使用 & 将父选择器带入包含伪类选择器的变量中：

.my-selector,
.my-other-selector {
  @{pseudo-states} {
    // rules
  }
}

以下尝试都在生成的css中产生了字面变量内容：

@pseudo-states: &:hover, &:focus, &:active, &.active;
@pseudo-states: ~"&:hover, &:focus, &:active, &.active";
@pseudo-states: ~"\&:hover, \&:focus, \&:active, \&.active;

有什么方法可以做到这一点？

似乎LESS根本不处理变量的内容，所以这个问题可能归结为是否有办法改变它。

【问题讨论】：

不，与号和逗号在插值变量中都没有任何特殊含义。有关可能的解决方法，请参阅例如 stackoverflow.com/questions/23935102。
@ShawnErquhart 是的，赏金可能会吸引更多关注，也许你会得到答案。与此同时，看看这个sample 是否对你有任何帮助。我没有将此添加为答案，因为它不能 100% 满足您的要求，但如果您愿意，我会这样做。
感谢您提供的实时示例 - 这确实有效，但仍然不规范。真的希望对选择器使用简单的内联替换。

标签： css less

【解决方案1】：

采用上面 cmets 中链接的示例之一，这是（迄今为止）最干净的解决方案：

// usage:

.my-selector,
.my-other-selector {
    .pseudo-states({
        /* rules */
    });
}

// impl.:

.pseudo-states(@-) {
    &:hover, &:focus, &:active, &.active {@-();}
}

【讨论】：

是的，我知道使用 mixin 作为替代方案，这显然是我必须要做的，但是对于干掉一些常用选择器的使用来说感觉有点过头了。发布了这个问题，希望那里的一些天才有更好的解决方案。不过，感谢您提出建议。
与可能的选择器插值语法相比，使用部分仅大 1 个字符；)
这不是我有问题的长度，而是通过将规则集括在括号+花括号中的语法差异。希望更接近实际的 css，而不是远离它。
@ShawnErquhart：除非我们使用一些复杂的 hack，否则您要实现的目标几乎是不可能的。我建议使用上述方法而不是任何其他 hack，因为至少对于那些了解 Less 基础知识的人来说，这更容易解释。
@Harry 好吧，需要是发明之母。有时，一个问题似乎无法克服，除非有人马上看到它。当我使用 Sass 时，我有一个简单的 @hover-states var，它就像一个魅力。我不喜欢将整个规则集作为参数传递给如此简单的东西。我正在为此添加赏金，我们会看看它的去向。