css - LESS CSS - 不重新发明轮子

Question

“轮子”是指嵌套的选择器路径。

大多数情况下，我已经将一个较大的 CSS 文件转换为 LESS，按 DOM 顺序嵌套规则。但是，我的一些样式被覆盖了。基本上，所有的“普通”样式都被嵌套了，使得它们的输出 CSS 规则非常具体（我想要的）。不那么具体的是父元素附加了类的规则。例子：

常规嵌套规则：

.grandparent {
  some: style;

  .parent {
     other: style;

     .child {
       you: get;

       .grandchild {
          the: picture;
       } 
     }
   }
}

所以，我遇到的问题是如果祖父母附加了一个特定的类，则为孙子添加样式。就像是：

.grandparent.visiting .grandchild {
  visibility: hidden;
}

有没有办法巧妙地将 .visiting 添加到我已经建立的大层次结构中？或者我是否必须为受 .grandparent.visiting 影响的所有子元素选择器重做整个嵌套顺序？

不确定这是否是菜鸟。几个周末前，我刚开始使用 LESS。但我似乎无法使用 :not 找到任何解决方案，而 & 选择器（尽管它非常棒）似乎也无济于事。

Answer 1

您可以使用 & 符号引用当前选择器，然后在其后写选择器，就像它在一行中一样。

.grandparent {
  some: style;

  &.visiting {
    .grandchild{ 
        visibility: hidden;
    }
  }
}