선택기 끝에 앰퍼샌드(&)를 사용할 때 SASS 믹스인에서 상위 선택기를 확장하는 방법은 무엇입니까?

SASS 선택기의 앰퍼샌드(&): 상위 범위 확장

SASS에서 앰퍼샌드(&) 기호는 상위 선택자를 확장합니다. 상위 선택자의 자체 클래스 이름을 포함하는 방식으로 믹스인 내에 규칙을 중첩할 수 있습니다. 그러나 선택기 끝에 앰퍼샌드를 사용하는 것은 독특한 문제입니다.

문제는 선택기에 호출자 클래스 이름이 포함되어 있는지 확인하는 것입니다. 다음 Sass 믹스인을 고려해보세요.

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

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

이 믹스인이 다른 CSS 클래스 내에서 호출되면 생성된 코드에는 호출자의 클래스 이름이 포함되지 않습니다. 대신 다음을 생성합니다.

<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 규칙: 상위 선택자를 보유할 변수를 정의하고 @at-root 규칙을 사용하여 확장합니다.

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

이러한 기술을 구현하면 믹스인 내에서 상위 선택기를 효과적으로 확장하여 생성된 코드에 호출자 클래스 이름이 포함되도록 할 수 있습니다.

위 내용은 선택기 끝에 앰퍼샌드(&)를 사용할 때 SASS 믹스인에서 상위 선택기를 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!