SASS 선택기에서 앰퍼샌드(&)를 사용하는 방법: 믹스인으로 중첩 문제 해결

SASS 선택기의 앰퍼샌드(&): 사용법 및 해결 방법

CSS용 전처리 언어인 SASS는 앰퍼샌드(&) 기호를 사용합니다. 재사용 및 유지 관리가 가능한 코드를 허용하여 상위 선택기를 나타냅니다. 그러나 앰퍼샌드를 끝에 사용하거나 선택기의 일부로 사용하면 문제가 발생할 수 있습니다.

문제 개요

LESS 동작을 모방하기 위한 믹스인에는 끝에 앰퍼샌드(&)가 있어서 잘못된 출력이 발생합니다. 원하는 결과는 아래와 같이 호출자 클래스가 각 후속 레벨에 추가되는 중첩된 선택기 세트를 생성하는 것입니다.

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: $pinkUnicornRainbow;
    ...
}

솔루션

Sass의 경우 버전 3.2 이하에서는 상위 선택기를 사용하는 유효한 방법은 다음과 같습니다.

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

Sass 3.3에는 다음 구문이 추가됩니다.

&bar, &-bar

Sass 3.4에는 다음과 같은 새로운 기능이 도입되었습니다. 앰퍼샌드는 변수에 할당되고 @at-root 규칙 내에서 사용될 수 있습니다:

$foo: &;

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

문제에 대한 적용

주어진 믹스인을 해결하려면, 앰퍼샌드는 다음과 같이 호출자 클래스와 함께 사용해야 합니다.

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

    .callerClass&.iThink .illNeverWork.callerClass& {

        color: $pinkUnicornRainbow;
        ...
    }
}

위 내용은 SASS 선택기에서 앰퍼샌드(&)를 사용하는 방법: 믹스인으로 중첩 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!