css - Sass 符号和父样式

Question

我的 HTML:

<div id="form" class="special">
    <div class="header">My special form</div>
<div>

还有下面的sass代码:

#form {
  .header {
    padding: 20px 10px;
    .special & {
      background: $special-color;
    }
  }
}

产生:

#form .header {
  padding: 20px 10px;
}

.special #form .header {
  background: #7cc52c;
}

然而，这并没有给我想要的结果。我想要的不是上面的 CSS:.special#form .header (元素 form 具有类 special ，而不是元素 .special 具有 form )

Answer 1

您可以通过这种方式实现您想要的 css。

#form {
  .header {
    padding: 20px 10px;
    @at-root #{selector-replace(&, '#form', '.special#form')} {
      background: blue;
    }
  }
}

此 scss 编译为以下 css

#form .header {
  padding: 20px 10px;
}

.special#form .header {
  background: blue;
}

使用selector-replace 函数，您可以轻松更改复合选择器中需要更改的部分。在此示例中，将用 .special#form 替换 #form。 @at-root 指令确保选择器位于顶层，而不是嵌套在任何选择器中。

当父选择器像您在问题中所做的那样附加和嵌套时，它反转选择器。在某些情况下这可能会有用，其中一种情况是使用 Modernizr 时，如 here 上的一张幻灯片所示。

希望这对您有所帮助。