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