반응형
SCSS는 CSS를 확장한 언어로서 중첩(Nesting) 기능을 제공합니다. 중첩은 부모 선택자 안에 자식 선택자를 작성할 수 있도록 도와주며, 이를 통해 스타일 코드를 더욱 간결하고 가독성 좋게 작성할 수 있습니다. 또한, 선택자 상위 참조(&)를 사용하여 부모 선택자를 참조하는 기능도 제공합니다. 이 글에서는 SCSS의 중첩과 선택자 상위 참조에 대해 알아보겠습니다.
중첩(Nesting)
중첩은 부모 선택자 안에 자식 선택자를 포함시킴으로써 스타일 코드를 보다 간결하고 구조적으로 작성할 수 있습니다.
.navbar {
background-color: #f1f1f1;
li {
display: inline-block;
margin: 0 10px;
a {
color: #333;
text-decoration: none;
}
}
}
위의 예제에서 .navbar 안에 li가, li 안에 a가 중첩되어 작성되었습니다. 이로 인해 CSS 코드에서의 중복을 줄이고, 스타일 속성들을 더 쉽게 관리할 수 있습니다.
선택자 상위 참조(&)
선택자 상위 참조(&)는 중첩된 선택자가 속한 부모 선택자를 참조하는 기능입니다. 이를 사용하여 조합된 선택자를 생성할 수 있습니다.
.button {
display: inline-block;
padding: 10px;
&.primary {
background-color: #007bff;
color: #fff;
}
&.secondary {
background-color: #6c757d;
color: #fff;
}
}
위의 예제에서 &를 사용하여 .button과 .primary, .secondary를 조합한 선택자들을 생성하고, 각각의 스타일을 정의하였습니다. 이렇게 함으로써 .button의 스타일 속성을 재사용하면서 각 상태에 맞는 스타일을 추가할 수 있습니다.
.button {
display: inline-block;
padding: 10px;
}
.button.primary {
background-color: #007bff;
color: #fff;
}
.button.secondary {
background-color: #6c757d;
color: #fff;
}
SCSS의 중첩과 선택자 상위 참조를 활용하면 CSS 코드를 더욱 간결하고 구조적으로 작성할 수 있습니다. 이를 통해 유지보수가 용이하고 모듈화된 스타일 코드를 만들 수 있습니다. 다음 글에서는 SCSS의 다른 기능들을 자세히 살펴보겠습니다.
반응형
'Style sheet > SCSS' 카테고리의 다른 글
[SCSS] SCSS Import와 Partials (0) | 2023.08.08 |
---|---|
[SCSS] SCSS 조건문과 반복문 (0) | 2023.08.07 |
[SCSS] SCSS Mixin과 함수 활용 (0) | 2023.08.07 |
[SCSS] SCSS 변수와 데이터 유형 (0) | 2023.08.07 |
[SCSS] SCSS(사스) 소개와 기본 문법 (0) | 2023.08.07 |