Sass：使用 & 符号“&”作为具有特定类的正文标签

Question

假设我有这个 HTML 代码：

<body class="boxed">
  <div class="text-white">
    <a href="#" class="btn-featured">Button</a>
  </div>
</dody>

我正在使用这个 sass 代码如下：

.boxed {
  // error with using "Ampersand"
  body& {

  }
}

但这会导致编译错误，其中说：

虽然我想要的结果如下：

// This the result i want
body.boxed {

}

我知道我可以这样使用它，它会产生我正在寻找的结果：

// I know i can use this
body {
  &.boxed {

  }
}

但是为了组织目的，我想将 .boxed 类代码与正文 css 代码内部分开。

那么为什么不允许这样做，尽管元素及其父级的类似代码适用于以下情况：

// Although this similar code for element and 
// it's parent is working
.btn-featured {
  .text-white & {
    font-size: 30px;
  }
}

事实上，我希望知道为什么不允许这样做！

Answer 1

你好莫拉德你需要使用 @at-root

.boxed {
  @at-root body#{&} {
     color: red;
  }
}

Sass：使用 &amp; 符号“&amp;”作为具有特定类的正文标签