하위 선택기를 동적으로 생성하기 위해 SASS 선택기에서 앰퍼샌드(&)가 어떻게 작동합니까?

SASS 선택기의 앰퍼샌드(&)

SASS에서 앰퍼샌드(&)는 선택기 내에서 사용될 때 특별한 의미를 갖습니다. 제공된 믹스인 예시에서 볼 수 있듯이 상위 선택자의 일부를 하위 선택자에 추가하는 데 사용할 수 있습니다.

Sass 버전 3.2 이하의 경우 다음 구문이 허용됩니다.

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

또한 이 구문이 지원됩니다.

.foo {
    .bar & {
        color: red;
    }
}

Sass 3.3부터 다음 구문이 유효합니다.

.foo {
    &bar, &-bar {
        color: red;
    }
}

마지막으로 Sass 3.4에서는 대체 접근 방식이 도입되었습니다.

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

이러한 기술을 활용하면 상위 선택자의 일부를 포함하는 하위 선택자를 동적으로 생성할 수 있습니다. 이는 다양한 상위 클래스에 적용할 수 있는 믹스인을 생성할 때 특히 유용합니다.

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