如何正确使用“＆”嵌套SCSS以重新使用直接父级部分类名？

问题描述

我想重用父级的类名，并在子元素上使用它，但是当嵌套多个级别时，它不能按预期工作。我只想将子类名称与直接父字符串连接起来，而不是整个串联的父类。我开始相信这是不可能的。

SCSS：

.block {
    margin: 2px;

    & &__element {
        margin: 3px;
              
        &-nested {
            margin: 4px;
        }
    }
}

输出：

.block {
  margin: 2px;
}

.block .block__element {
  margin: 3px;
}

.block .block__element-nested {
  margin: 4px;
}

所需的输出：

.block {
  margin: 2px;
}

.block .block__element {
  margin: 3px;
}

.block .block__element .block__element-nested {
  margin: 4px;
}

解决方法

Bro， Sass 目前不支持nested-&。希望这是唯一的解决方案：

.block {
  margin: 2px;

  & &__element {
    margin: 3px;
  }
  
  & &__element &-nested {
    margin: 4px;
  }
}

编辑

要获得所需的输出，您可以这样做。

      .block {
          margin: 2px;

          & &__element {
            margin: 3px;

              & .block__element-nested {
                  margin: 4px;
              }  
         }
      }

编辑2

       .block {
         margin: 2px;
       }
       .block .block__element {
         margin: 3px;
       }
       .block .block__element .block__element-nested {
         margin: 4px;
       }

输出：

python-xml-2.7.17-28.51.1.x86_64  
rpm-4.11.2-16.21.1.x86_64  
zypper 1.13.51

在我看来，您想要的输出没有意义，因为它在更大范围内非常令人困惑。最下面的示例来自docs。重点不是要深入到我认为的第三级...

.block {
  background: red;

  &__element {
    background: red; 

    &--nested {
      background: red;
    }
  }
}

.block {
  background: red;
}
.block__element {
  background: red;
}
.block__element--nested {
  background: red;
}

这里有2个解决方案，可以使用selector-nest正常工作。您将找到更多信息：https://sass-lang.com/documentation/modules/selector#nest

您可以在这里测试解决方案：https://www.sassmeister.com

方法1：

.block {
    margin: 2px;
      & &__element { 
        margin: 3px;
        
       #{selector-nest('.block__element','&-nested')} {
            margin: 4px;
        }
    }
}

方法2：

.block {
    margin: 2px;
    
      #{selector-nest('.block','&__element')}{
          margin: 3px;
          
          #{selector-nest('.block__element','&-nested')} {
            margin: 4px;
        }
          
      }
}

显然这无法完成。如此处所述： https://css-tricks.com/the-sass-ampersand/#what-the-isnt

我的意图是仅将＆替换为.parent，以期对此进行编译： .parent .child {} 但这行不通。 ＆始终是完全编译的父选择器。

bem sass sass