在选择器末尾使用与号 (&) 时，如何在 SASS Mixins 中扩展父选择器？

SASS 选择器中的与号 (&)：扩展父范围

在 SASS 中，与号 (&) 符号是一个强大的工具扩展父选择器。它允许您以包含父选择器自己的类名的方式在 mixin 中嵌套规则。然而，在选择器末尾使用＆符号提出了一个独特的挑战。

问题在于确保选择器包含调用者类名。考虑以下 Sass mixin：

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

    .iThink .illNeverWork&amp; {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

当在另一个 CSS 类中调用此 mixin 时，生成的代码将不包含调用者的类名。相反，它会生成：

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

.iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}</code>

要解决此问题，您可以利用以下技术：

Sass 版本 3.2 及更早版本：

• 使用多个选择器：用逗号分隔每个选择器，确保与号 (&) 的使用一致。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .foreverAlone,
    .iThink &amp;.illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass 版本 3.3：

• 连字符语法： 使用连字符语法来扩展父选择器。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .iThink &amp;-illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass 版本 3.4：

• 根规则： 定义一个变量来保存父选择器并使用 @at-root 规则来扩展它。

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    $parent: &amp;;
    @at-root .iThink#{&amp;} {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

通过实现这些技术，您可以有效地扩展 mixin 中的父选择器，确保生成的代码包含调用者类名。

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