从选择中使用 LESS 链接父选择器？

Question

我有多个正文 classes 并且我在这些页面中隐藏了一个元素。当使用 javascript 将 class 添加到页面时，我想显示此元素（假设正文具有这些正文 classes）。

这工作正常，但我可以重写它以避免重复吗？

.body-class-a,
.body-class-b,
.body-class-c {
  .element {
    display: none;
  }
}

.body-class-a.js-class,
.body-class-b.js-class,
.body-class-c.js-class {
  .element {
    display: block;
  }
}

通常我会做这样的事情。但是它不起作用，因为 .infscrl-all-shown 不高于 .body-class-a，它处于同一水平。

.body-class-a,
.body-class-b,
.body-class-c {
  .element {
    display: none;
    .infscrl-all-shown & {
      display: block;
    }
  }
}

Answer 1

看起来您只需要删除 .infscrl-all-shown &.

之间的 space

在这样做时，您不再是 select 后代（因为 space 在 class selector 和父 select 或 &)。 select 或 .infscrl-all-shown& 将 select .body-* class 而不是 class .infscrl-all-shown.

.body-class-a,
.body-class-b,
.body-class-c {
  .element {
    display: none;
    .infscrl-all-shown& {
      display: block;
    }
  }
}

它将输出以下内容：

.body-class-a .element,
.body-class-b .element,
.body-class-c .element {
  display: none;
}
.infscrl-all-shown.body-class-a .element,
.infscrl-all-shown.body-class-b .element,
.infscrl-all-shown.body-class-c .element {
  display: block;
}

从选择中使用 LESS 链接父选择器？

Chain parent selectors with LESS from within selection?

css

less