在sass中反转嵌套顺序

我的无礼-

.form-control{
   .label{
        //reversing the nesting order:
       .lg & {  

       }
   }
}

产生css-

.lg  .form-control .label {

}

但我希望有一个css-

.lg .label {

}

or//
.form-control .lg .label {

}

---

有什么帮助吗？

你不能，这就是SASS中嵌套的意义所在

因此，写下以下内容：

.form-control{
   .label{
       .lg & {  
         // really specific styling
       }
   }
}

这是：

.lg .label {
  // more general styling
}

结合起来就可以变得强大。太多的嵌套总是以太具体的样式规则结束，通常会有更多的负面影响，因为它确实很有帮助

注意：如上所述，您可以使用根目录下的

@指令来避免该问题。
在根目录下应用于子目录的
默认情况下将跳过父目录下的
，并以根目录下的
为目标

像这样：

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

将编译为：

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

通过使用带
的
或不带
的
可以添加或删除特定规则。
这是。
关于@at root.lg.label？@s.k.paul呢。哦，是的，你说得对，我没想到。我会为你编辑我的答案。