LESS CSS - 不重新发明***

Posted 2023-03-06

【中文标题】LESS CSS - 不重新发明***

【英文标题】：LESS CSS - Not reinventing the wheel

【发布时间】：2022-01-10 20:31:04

【问题描述】：

“***”是指嵌套选择器路径。

我已将一个较大的 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 找到任何解决方案，而 & 选择器（尽管它很出色）似乎也无济于事。

【参考方案1】：

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

.grandparent 
  some: style;

  &.visiting 
    .grandchild 
        visibility: hidden;
    
  

【讨论】：

我就是这样开始做的，但这或多或少是我试图避免的。不过，这似乎是完成它的唯一方法。

你为什么要避免这个？顺便说一句，你可以将它添加到当前文件的末尾，你可以编写多个 .grandparent 选择器，这样你就不必重构整个代码了。

不太复杂的选择器似乎被忽略了，因为原始规则集有更具体的选择器。我知道修复它的唯一方法是添加所有父选择器。

您可以使用 !important 覆盖更具体的选择器。顺便说一句，您不应该对选择器过于具体。 css-tricks.com/sass-style-guide/…