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

Question

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

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

.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 & 之间的空格。

这样做时，您不再选择后代(因为类选择器和父选择器之间的空格被移除，&)。选择器 .infscrl-all-shown& 将选择 .body-* 类而不是 .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;
}