상위 선택기 참조를 위해 SASS 선택기에서 앰퍼샌드(&)를 올바르게 사용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

상위 선택기 참조를 위해 SASS 선택기에서 앰퍼샌드(&)를 올바르게 사용하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-10-30 03:42:02

원래의

1025명이 탐색했습니다.

How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?

SASS의 앰퍼샌드(&): 끝 및 선택기 내에서 사용

개발자는 앰퍼샌드(&)를 사용할 때 종종 문제에 직면합니다. SASS 선택기의 문자(특히 끝이나 선택기 내에 나타나는 경우) 이번 문의에서는 이 특정 문제를 자세히 조사합니다.

제시된 믹스인은 일부 LESS 코드를 SASS로 포팅하려고 시도합니다. 그러나 선택기에서 &를 잘못 사용하여 코드가 원하는 출력을 생성하지 못합니다.

& 문자의 목적을 이해하려면 해당 문자가 상위 선택기의 자리 표시자로서의 역할을 인식하는 것이 중요합니다. . 믹스인 또는 블록 내에서 사용될 때 &는 믹스인을 호출한 선택기 또는 클래스를 나타냅니다.

이 경우 의도된 동작은 믹스인이 호출 요소의 클래스 이름을 포함하는 선택기를 생성하는 것입니다. 예를 들어 믹스인이

요소의 경우 다음을 생성해야 합니다.

.callerClass .foreverAlone {
    ...
}

.callerClass .iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}

로그인 후 복사

그러나 제공된 코드는 &의 잘못된 배치로 인해 이를 달성하지 못합니다. 이 문제를 해결하려면 &를 적절하게 사용하여 상위 선택기를 나타내야 합니다.

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

        .iThink &amp;.illNeverWork {

            color: #123ABC;
            ...
        }
  }

로그인 후 복사

이 수정된 구현을 통해 믹스인은 호출자 클래스를 믹스인 내에서 생성된 모든 중첩 선택기 앞에 올바르게 추가합니다. &의 배치와 사용은 결과 CSS 출력에 큰 영향을 미칠 수 있으므로 정확하게 사용하는 것이 중요합니다.

위 내용은 상위 선택기 참조를 위해 SASS 선택기에서 앰퍼샌드(&)를 올바르게 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!