如何在 SASS 选择器中有效使用与号 (&)？

SASS 选择器中的与号 (&)：掌握其结尾和行内使用

与号 (&) 起着至关重要的作用在 SASS 选择器中，允许您有效地引用父选择器。然而，它的用法可能很棘手，特别是当它出现在末尾或作为选择器的一部分时。

问题：

考虑 SASS 中的以下 mixin：

<code class="sass">@mixin button-variant($color, $background, $border)
    {
        ...
        .foreverAlone{
            ...
        }

        .iThink .illNeverWork&amp; {

            color: $pinkUnicornRainbow;
            ...
        }
  }</code>

在各种 div 类中调用时，此 mixin 无法生成预期的 CSS。而不是产生这样的结果：

<code class="css">.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}</code>

它会产生错误的输出。

解决方案：

要实现所需的 CSS，请了解细微差别& 符号的使用至关重要。在 SASS 3.2 及更早版本中，可以使用以下有效方法来引用父选择器：

<code class="sass">.foo {
    &amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active] {
        color: red;
    }
}

.foo {
    .bar &amp; {
        color: red;
    }
}</code>

从 Sass 3.3 开始，语法得到简化，允许使用例如：

<code class="sass">.foo {
    &amp;bar, &amp;-bar {
        color: red;
    }
}</code>

对于 Sass 3.4 及更高版本，可以使用更强大的方法：

<code class="sass">.foo {
    $foo: &amp;;
    @at-root bar#{&amp;} {
        color: red;
    }
}</code>

利用这些技术，您可以有效地处理 SASS 选择器中的＆符号使用，使您能够生成精确且可维护的 CSS输出。

以上是如何在 SASS 选择器中有效使用与号 (&)？的详细内容。更多信息请关注PHP中文网其他相关文章！