SASS `@at-root`
이 글은 SASS의 @at-root를 설명합니다.
@at-root의 기본 사용법부터 고급 예제까지 단계별로 모두 다룹니다.
YouTube Video
SASS @at-root에 대해
@at-root는 SASS가 제공하는 지시어로, 중첩된 셀렉터나 속성을 현재 중첩 구조에서 부모 스코프로 이동시키는 데 사용됩니다. 이 기능을 활용하면 중첩 깊이를 제어하고 의도한 CSS를 보다 효율적으로 생성할 수 있습니다.
@at-root의 기본 사용법
SASS의 중첩은 코드를 더 읽기 쉽게 해주지만, 과도한 중첩은 의도하지 않은 CSS가 생성될 수 있습니다. @at-root를 사용하면 특정 코드 블록을 중첩 구조에서 제외할 수 있습니다.
기본 구문
1@at-root {
2 // Code to be output at the parent (root) scope
3}사용 예시
1.nav {
2 color: blue;
3 @at-root {
4 .nav-item {
5 color: red;
6 }
7 }
8}컴파일된 CSS
1.nav {
2 color: blue;
3}
4.nav-item {
5 color: red;
6}@at-root때문에.nav-item이.nav바깥에 출력됩니다.
중첩 셀렉터에서의 @at-root
깊은 중첩 안에서도 @at-root를 사용하면 특정 셀렉터를 루트 수준으로 이동할 수 있습니다. 이를 통해 복잡한 구조에서도 통제된 CSS를 출력할 수 있습니다.
사용 예시
1.card {
2 background: white;
3 .card-header {
4 color: black;
5 @at-root .card-title {
6 font-size: 20px;
7 }
8 }
9}컴파일된 CSS
1.card {
2 background: white;
3}
4.card .card-header {
5 color: black;
6}
7.card-title {
8 font-size: 20px;
9}@at-root를 사용하면.card-title이.card-header바깥에 출력됩니다.
인자를 사용하는 @at-root
인자를 지정하면 @at-root를 더 유연하게 제어할 수 있습니다.
without 인자
without 인자를 사용하면 출력 시 지정한 스코프를 무시합니다. 즉, 부모 규칙이나 미디어 쿼리를 제거할 수 있습니다.
사용 예시
1.nav {
2 @media (min-width: 768px) {
3 &__item {
4 @at-root (without: media) {
5 color: red;
6 }
7 }
8 }
9}컴파일된 CSS
1.nav__item {
2 color: red;
3}- 이 경우
@at-root (without: media)는 미디어 쿼리 스코프를 제외하며,.nav__item은 루트에서 출력됩니다.
with 인자
with를 사용하면 지정한 스코프만 출력에 유지됩니다. 특정 스코프를 유지하면서 루트로 출력하고 싶을 때 유용합니다.
사용 예시
1.nav {
2 &__item {
3 @media (min-width: 768px) {
4 @at-root (with: media) {
5 &-large {
6 font-size: 18px;
7 }
8 }
9 }
10 }
11}컴파일된 CSS
1@media (min-width: 768px) {
2 .nav__item-large {
3 font-size: 18px;
4 }
5}@at-root (with: media)는 미디어 쿼리 구조를 유지하면서 셀렉터를 루트로 이동시킵니다.
여러 조건 지정하기
공백으로 구분하여 한 번에 여러 스코프를 지정할 수도 있습니다.
사용 예시
1.wrapper {
2 @media (min-width: 600px) {
3 @at-root (without: rule media) {
4 .global-style {
5 color: green;
6 }
7 }
8 }
9}컴파일된 CSS
1.global-style {
2 color: green;
3}- 이 예에서는
rule(일반 셀렉터)과media(미디어 쿼리) 모두가 제외되므로,.global-style은 어떠한 스코프에도 속하지 않고 완전히 루트 수준에서 출력됩니다. 복잡한 중첩 내부에서도 의도적으로 전역 스타일을 정의하고 싶을 때 유용합니다.
미디어 쿼리와의 결합
@at-root를 사용하면 미디어 쿼리 내부에서 스타일을 최상위 수준으로 출력할 수 있습니다. 이를 통해 컴포넌트 수준에서 반응형 디자인을 정의할 수 있습니다.
사용 예시
1.container {
2 @media (min-width: 768px) {
3 @at-root {
4 .container-large {
5 width: 80%;
6 }
7 }
8 }
9}컴파일된 CSS
1.container-large {
2 width: 80%;
3}@at-root를 사용하면 미디어 쿼리 내부에서도 루트 수준의 스타일을 출력할 수 있습니다. 이로써 각 브레이크포인트마다 독립적인 전역 스타일을 쉽게 정의할 수 있습니다.
@at-root의 활용 사례
특정 조건에서 스타일을 루트 수준으로 출력하고 싶을 때 @at-root는 유용합니다. 특히 컴포넌트 내부에서 미디어 쿼리나 테마별 스타일을 다룰 때 도움이 됩니다.
컴포넌트와 테마 분리하기
@at-root를 사용하면 미디어 쿼리 내부에서도 독립적인 전역 클래스를 생성할 수 있습니다. 이를 통해 컴포넌트별 테마와 상태를 더 쉽게 정리할 수 있습니다.
사용 예시
1.card {
2 background: white;
3 color: black;
4
5 @media (prefers-color-scheme: dark) {
6 @at-root (with: media) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11 }
12 }
13}컴파일된 CSS
1.card {
2 background: white;
3 color: black;
4}
5
6@media (prefers-color-scheme: dark) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11}- 이 예시에서는
.card내부에서 다크 테마 스타일을 정의하면서,@at-root가 별도의.card-dark클래스를 생성합니다. 이를 통해 서로 다른 테마 간에 클래스를 유연하게 전환할 수 있습니다.
노트
@at-root를 사용할 때는 다음 사항을 유의하세요.
-
과도한 사용을 피하기
@at-root는 강력하지만, 남용하면 중첩의 의도가 흐려질 수 있습니다. -
의도를 명확히 하기
@at-root를 사용하는 이유를 주석으로 남기면 다른 개발자들이 이해하기 쉬워집니다. -
스코프 일관성에 유의하기 출력을 루트로 이동하면 스타일 의존성이 바뀔 수 있습니다. 적용 대상 요소를 명확히 하세요.
-
다른 SASS 기능과 결합하기
@at-root를@mixin,@function과 결합하면 보다 유연한 CSS 설계가 가능합니다.
요약
{^ i18n_speak
@at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.