-
Sass(SCSS) 기본 공부 3 중첩HTML5_CSS3/sass 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; }
*참고사이트
'HTML5_CSS3 > sass' 카테고리의 다른 글
Sass(SCSS) 기본 공부 2 변수 (0) 2023.04.06 Sass(SCSS) 기본 공부 1 (0) 2023.04.05