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功能，您可以轻松更改需要更改的复合选择器部分。在此示例中，这将用#form替换.special#form。 @at-root指令确保选择器位于顶层而不是嵌套在任何选择器中。

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

希望这有帮助。

Answer 2

最简单的方法是使用@ at-root和interpolation

$special-color:#7cc52c;
#form {
    .header {
        padding: 20px 10px;

        // use @at-root to move .special out of #form .header
        @at-root { 

            // append #form .header using the & selector  
            // note! you need to use interpolation #{} to 
            // remove the white space between .special and #form
            .special#{&} {
                background: $special-color;
            }
        }
    }
}

Sass＆符号和父母风格

2 个答案: