Sass(SCSS) 기본 공부 3 중첩

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;
}

 

 

*참고사이트

https://www.w3schools.com/sass/sass_nesting.php

https://heropy.blog/2018/01/31/sass/