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

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

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

问题概述

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

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: $pinkUnicornRainbow;
    ...
}

Solutions

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

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

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

&bar, &-bar

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

$foo: &;

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

问题的应用

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

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

    .callerClass&.iThink .illNeverWork.callerClass& {

        color: $pinkUnicornRainbow;
        ...
    }
}

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