css - LESS:包含多个选择器以在另一个选择器中使用的变量

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;
    }
  }
}

或者使用复杂的混合(如 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();