Question

假设我有这个HTML代码：

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

我正在使用以下代码：

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

  }
}

但它会导致编译错误：

虽然我想要的结果如下：

// This the result i want
body.boxed {

}

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

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

  }
}

但是我想将.boxed类代码从body css代码中分离出来用于组织目的。

为什么不允许这样做，尽管element和它的父代码的类似代码适用于以下内容：

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

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

Answer 1

你好morad你需要使用@at-root

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

Answer 2

你需要交换你的选择器才能像你说的那样工作。

body {
  &.boxed {
    background: red;
  }
}

问题在于＆符号将前一个选择器连接到当前选择器。所以当你做这样的事情时：

.boxed {
  body & {
    background: red;
  }
}

它试图在一个元素内部添加“nothing”，其中包含boxed类。最好的方法是按照你已经说过的方式去做。