如何在 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中文網其他相關文章！