HTML5_CSS3/sass
Sass(SCSS) 기본 공부 3 중첩
raim-2
2023. 4. 6. 02:23
반응형
Sass(SCSS) 기본 공부 1 https://raim-2.tistory.com/17
Sass(SCSS) 기본 공부 2 https://raim-2.tistory.com/18
Sass/SCSS 중첩 (Nesting)
Sass에서는 중첩이 가능하다.
중첩은 일반 CSS보다 더 깔끔하고, 구조 및 선택자 파악이 쉽다는 장점이 있다.
<ul>
<li>
<a href="#">
<p>첫번째</p>
</a>
</li>
<li>
<a href="#">
<p>두번째</p>
</a>
</li>
</ul>
1. 중첩 사용방법
중첩을 사용하는 방법은 간단하다.
아래 예시처럼 중첩하고 싶은 만큼 대괄호 {} 안에 자식 선택자를 넣으면 된다.
$txt_color:#fff;
$bg_color : background-color;
$font_size : 18px;
$my_border : 1px solid #ddd;
ul{
li {
#{$bg_color} : black;
border: $my_border;
a {
display: block;
color: $txt_color;
p {
font-size: $font_size;
}
}
}
}*컴파일 시
컴파일 시에는 중첩이 되지 않은 채로 표현된다.
ul li {
background-color: black;
border: 1px solid #ddd;
}
ul li a {
display: block;
color: #fff;
}
ul li a p {
font-size: 18px;
}
2. 상위 선택자 참조하기 &
중첩에서 상위 부모 선택자를 참조하여 바꿔줄 때는 & 키워드를 사용한다.
$bg_color : background-color;
ul {
li {
#{$bg_color}: black;
&:first-child {
#{$bg_color}: pink;
}
&:nth-child(2) {
#{$bg_color}: green;
}
}*컴파일 시
ul li {
background-color: black;
}
ul li:first-child {
background-color: pink;
}
ul li:nth-child(2) {
background-color: green;
}
& 키워드는 부모 선택자 이름을 반복해서 쓸 필요없이 &만으로 대체가 가능해,
부모 선택자의 이름을 계속해 사용하는 BEM 방법론을 사용할 때 유용하게 사용할 수 있다.
.card { /* Block */
background-color: #fff;
border: 1px solid #007bff;
border-radius: 5px;
&__content { /* Element */
padding: 10px;
&--link { /* Modifier */
color: #007bff;
text-decoration: none;
&:hover {
text-decoration: underline
}
}
}
}*컴파일 시
/* BEM 사용하기 */
.card { /* Block */
background-color: #fff;
border: 1px solid #007bff;
border-radius: 5px;
}
.card__content { /* Element */
padding: 10px;
}
.card__content--link { /* Modifier */
color: #007bff;
text-decoration: none;
}
.card__content--link:hover {
text-decoration: underline;
}
* 중첩 벗어나기 @at-root
중첩을 사용해 작업하다가, 특정 선택자의 하위 선택자가 아닌
독립된 선택자로 사용하고 싶을 때 사용한다.
$bg_color : background-color;
ul {
li {
#{$bg_color}: black;
&:first-child {
#{$bg_color}: pink;
}
&:nth-child(2) {
#{$bg_color}: green;
}
@at-root .box {
width: 100px;
height: 100px;
#{$bg_color}: rgb(44, 160, 104);
display: inline-block;
}
}*컴파일 시
ul li {
background-color: black;
}
ul li:first-child {
background-color: pink;
}
ul li:nth-child(2) {
background-color: green;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(44, 160, 104);
display: inline-block;
}
3. 중첩된 속성 - CSS 속성 확장 (extensions)
CSS 속성 중 font-family, font-size 또는 text-align, text-overflow 같이 동일한 접두사를 사용하는 경우,
Sass(SCSS)에서는 속성을 중첩하여 사용할 수도 있다.
공통된 접두사: {
뒤에 오는 속성 이름1 : 값;
뒤에 오는 속성 이름2 : 값;
뒤에 오는 속성 이름3 : 값;
}
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}ul{
li {
#{$bg_color} : black;
a {
display: block;
color: $txt_color;
p {
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
}
}
}
}*컴파일 시
ul li a p {
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
* (응용/HEROPY TECH 사이트 인용)
부트스트랩의 CSS 속성처럼 속성을 변수를 이용해 세분화 시킬 수 있다.
.fs {
&-small { font-size: 12px; }
&-medium { font-size: 14px; }
&-large { font-size: 16px; }
}*컴파일 시
.fs-small {
font-size: 12px;
}
.fs-medium {
font-size: 14px;
}
.fs-large {
font-size: 16px;
}
*참고사이트