css - 使用 LESS 构造(例如 "td&")将父 css 类添加到 mixins

Question

我希望使用 Less CSS 在父 css 选择器中嵌套一些规则。通常这工作得很好，但我在 Twitter Bootstrap 的 css 中遇到了一个有问题的结构。这是有问题的混合模式:

.responsive-invisibility() {
    &,
  tr&,
  th&,
  td& { display: none !important; }
}

下面是我希望如何使用它:

body.force-sm-viewport-or-higher {
    .visible-xs {
      .responsive-invisibility();
    }
    
    /* more stuff */
}

这是产生的结果:

body.force-sm-viewport-or-higher .visible-xs,
trbody.force-sm-viewport-or-higher .visible-xs,
thbody.force-sm-viewport-or-higher .visible-xs,
tdbody.force-sm-viewport-or-higher .visible-xs {
  display: none !important;
}

我想要的:

body.force-sm-viewport-or-higher .visible-xs,
body.force-sm-viewport-or-higher tr.visible-xs,
body.force-sm-viewport-or-higher th.visible-xs,
body.force-sm-viewport-or-higher td.visible-xs {
  display: none !important;
}

如果不手动“扩展”body.force-sm-viewport-or-higher 父级中的 mixin，这是否可能？在升级 Bootstrap 时，扩展 mixins 非常容易出错且乏味。

注意

在这里，我发现了在嵌套类名后使用“&”符号的作用: LESS CSS: abusing the & Operator when nesting?

编辑 1

我还需要对这个更复杂的 mixin 做同样的事情。

.responsive-visibility() {
  display: block !important;
  table&  { display: table; }
  tr&     { display: table-row !important; }
  th&,
  td&     { display: table-cell !important; }
}

Answer 1

#1

可能的解决方案是提供类名作为 mixin 参数附加:

.responsive-invisibility(@postfix) {
      @{postfix},
    tr@{postfix},
    th@{postfix},
    td@{postfix} {display: none !important;}
}

body.force-sm-viewport-or-higher {
    .responsive-invisibility(~'.visible-xs');
    /* more stuff */
}

编辑:您需要自己定义该 mixin，即不要修改原始的 Bootstrap .responsive-invisibility，这样您就可以同时使用两者而不会发生冲突。

#2

一个面向 future 的兼容解决方案，类似于@Scotts 回答中建议的解决方案(并且不受其启发)但产生的垃圾更少:

.invisible_ {
    .responsive-invisibility(); // use original Bootstrap mixin
}

.responsive-invisibility(@postfix) {
      @{postfix},
    tr@{postfix},
    th@{postfix},
    td@{postfix} {&:extend(.invisible_);}
}

body.force-sm-viewport-or-higher {
    .responsive-invisibility(~'.visible-xs');
    /* more stuff */
}

如果他们在 Bootstrap 中这样做，这样您就不必修改隐形样式(但您仍然必须继续跟踪 tr, th, td 列表以防他们更改它)。