如何在 SASS 選擇器中使用與號 (&)：使用 Mixins 解決嵌套挑戰-css教學-PHP中文網

如何在 SASS 選擇器中使用與號 (&)：使用 Mixins 解決嵌套挑戰

Mary-Kate Olsen

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

原創

405 人瀏覽過

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