Question

我不太清楚如何描述这一点，所以我会尽力给出一个很好的例子。我的情况是这样的：

@var: ~"a";
@blah: ~"body > header > @{var} > strong > em";

@{blah} {
    color: red;
}

输出

body > header > a > strong > em {
    color: red;
}

但是如果你想添加像@var: ~"a, a:hover"这样的东西怎么样呢？你怎么能把它输出呢？

body > header > a > strong > em,
body > header > a:hover > strong > em {
  color: red;
}

Answer 1

另请参阅：https://github.com/less/less.js/issues/2263

如果您允许将@var拆分为两个（或更多）分隔变量，则可以使用以下Less代码：

@var1: ~"> a";
@var2: ~"> a:hover";
body > header {@{var1},@{var2} { > strong > em {color:red;}}}

前面将编译成以下CSS代码：

body > header > a > strong > em,
body > header > a:hover > strong > em {
  color: red;
}

当您@var: "a", "a:hover";时，您也可以使用：

@var1: e(extract(@var,1));
@var2: e(extract(@var,2));

body > header {
  > @{var1}, > @{var2} {
    > strong > em {
      color: red;
    }
  }
}

或者使用复杂的mixin（如Bootstrap一样，请参阅：LESS loops used to generate column classes in twitter - How do they work?）来构建选择器：

.mixin(@iterator: 0; @selectors: ~""; @seperator: ~"") when (@iterator < length(@var)) {
  @blah: ~"body > header > @{selector} > strong > em";
  @selector: extract(@var,@iterator + 1);
  @selectorlist: ~"@{selectors} @{seperator} @{blah}";
  .mixin((@iterator + 1); @selectorlist; ~",");
}
.mixin(@iterator; @selectors: ~""; @seperator: ~"") when (@iterator = length(@var)) {
  @{selectors} {
    color:red;
  }
}
.mixin();

Answer 2

以防万一我从上面的评论中提出“可读”的解决方案：

// "variables":

a, a:hover {
    &:extend(.var all);
}

body > header > .var > strong > em 
    :extend(.blah) {}

// usage:

.blah {
    color: red;
}

其中一个extend实际上是多余的，我只是将它用作原始代码段的结构（即var到blah“连接”）。

LESS：包含多个选择器的变量，用于在另一个选择器中使用

2 个答案: