如何在 SASS 选择器中使用与号 (&)：使用 Mixins 解决嵌套挑战-css教程-PHP中文网

如何在 SASS 选择器中使用与号 (&)：使用 Mixins 解决嵌套挑战

Mary-Kate Olsen

发布： 2024-10-30 05:00:02

原创

406 人浏览过

How to Use the Ampersand (&) in SASS Selectors: Solving Nesting Challenges with Mixins

SASS 选择器中的与号 (&)：用法和解决方法

SASS 是 CSS 的预处理语言，使用与号 (&) 符号代表父选择器，允许可重用和可维护的代码。然而，在末尾使用 & 符号或作为选择器的一部分可能会带来挑战。

问题概述

旨在模仿 LESS 行为的 mixin 有一个带有末尾有“&”符号，导致输出不正确。期望的结果是生成一组嵌套的选择器，其中调用者类被添加到每个后续级别，如下所示：

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: $pinkUnicornRainbow;
    ...
}

登录后复制

Solutions

For Sass在 3.2 及以下版本中，使用父选择器的有效方法包括：

&amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active]

登录后复制

在 Sass 3.3 中，添加了以下语法：

&amp;bar, &amp;-bar

登录后复制

Sass 3.4 引入了一个新功能，其中＆符号可以分配给变量并在@at-root规则中使用：

$foo: &amp;;

登录后复制

@at-root bar#{&amp;} {
    color: red;
}

登录后复制

问题的应用

要解决给定的mixin， & 符号应与调用者类结合使用，如下所示：

@mixin button-variant($color, $background, $border)
{
    ...
    .callerClass&amp;.foreverAlone{
        ...
    }

    .callerClass&amp;.iThink .illNeverWork.callerClass&amp; {

        color: $pinkUnicornRainbow;
        ...
    }
}

登录后复制

以上是如何在 SASS 选择器中使用与号 (&)：使用 Mixins 解决嵌套挑战的详细内容。更多信息请关注PHP中文网其他相关文章！