1. Nesting (중첩)
Sass의 중첩(Nesting)은 CSS 선택자를 더욱 직관적으로 작성할 수 있게 해주는 강력한 기능으로 부모 선택자 안에 자식 선택자를 중첩해 코드를 작성하면, 구조가 명확하고 유지보수가 쉬운 스타일 시트를 만들 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sass-Nesting</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Go</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</nav>
</body>
</html>2. Sass 중첩 코드 예시
nav {
ul {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
color: red;
&:hover {
color: pink;
}
}
}
}
}
이 코드는 css로 다음과 같이 변환됩니다.
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: red;
}
nav ul li a:hover {
color: pink;
}
/*# sourceMappingURL=style.css.map */3. 중첩의 장점
Sass를 사용해 중첩을 사용하면 다음과 같은 장점을 가질 수 있습니다.
- 가독성 향상: 관련된 스타일을 그룹화하여 코드가 더 이해하기 쉬움
- 유지보수 용이: 구조가 명확해져 나중에 수정하기 쉬움
- CSS 계층 구조 반영: HTML 구조를 그대로 반영해 시각적으로 이해하기 쉬움
GitHub - Koras02/sass-bloging: https://thinky.tistory.com/category/Front-End/SASS
https://thinky.tistory.com/category/Front-End/SASS - Koras02/sass-bloging
github.com
LIST
'Front-End > SASS' 카테고리의 다른 글
| [Sass] 2장 기본 문법 - Sass 변수 사용법 (0) | 2025.03.25 |
|---|---|
| [Sass] 1장 Sass란? (0) | 2025.03.09 |