SASS 선택기에서 앰퍼샌드(&)를 효과적으로 사용하려면 어떻게 해야 합니까?

SASS 선택기의 앰퍼샌드(&): 끝 및 인라인 사용 마스터하기

앰퍼샌드 문자(&)가 중요한 역할을 합니다. SASS 선택기에서 상위 선택기를 효과적으로 참조할 수 있습니다. 그러나 사용법이 까다로울 수 있으며, 특히 선택기의 끝이나 일부로 나타날 때 더욱 그렇습니다.

문제:

SASS에서 다음 혼합을 고려하세요.

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

        .iThink .illNeverWork&amp; {

            color: $pinkUnicornRainbow;
            ...
        }
  }</code>

다양한 div 클래스 내에서 호출하면 이 믹스인이 의도한 CSS를 생성하지 못합니다. 다음과 같은 것을 생성하는 대신:

<code class="css">.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}</code>

잘못된 출력을 생성합니다.

해결책:

원하는 CSS를 얻으려면 뉘앙스를 이해하세요. 앰퍼샌드 사용이 필수적입니다. SASS 버전 3.2 이하에서는 다음과 같은 유효한 방법을 사용하여 상위 선택기를 참조할 수 있습니다.

<code class="sass">.foo {
    &amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active] {
        color: red;
    }
}

.foo {
    .bar &amp; {
        color: red;
    }
}</code>

Sass 3.3부터는 구문이 단순화되어 다음과 같이 사용할 수 있습니다.

<code class="sass">.foo {
    &amp;bar, &amp;-bar {
        color: red;
    }
}</code>

Sass 3.4 이상의 경우 훨씬 더 강력한 접근 방식을 사용할 수 있습니다.

<code class="sass">.foo {
    $foo: &amp;;
    @at-root bar#{&amp;} {
        color: red;
    }
}</code>

이러한 기술을 활용하면 SASS 선택기에서 앰퍼샌드 사용을 효과적으로 처리할 수 있으므로 정확하고 유지 관리가 가능한 CSS를 생성할 수 있습니다. 출력합니다.

위 내용은 SASS 선택기에서 앰퍼샌드(&)를 효과적으로 사용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!