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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
