Scss #1. 네스팅 (Nesting)

Scss를 사용하는 가장 큰이유중 하나인 네스팅 기능입니다.

 

부모영역의 서브루틴 안에 또다른 서브루틴을 넣어서 css에서 여러줄 사용해야하는 부분들을

조금더 생산성있게 사용가능합니다.

 

아래는 scss 파일입니다.

// scss file

#sample {
    font-weight: bold;
    color: blue;
    span {
        color: red;
        strong {
            color: green;
        }
    }
}

 

위의 scss파일을 컴파일 하게되면 아래의 css파일로 변하게 됩니다.

// css file

#sample {
  font-weight: bold;
  color: blue;
}

#sample span {
  color: red;
}

#sample span strong {
  color: green;
}

 

가장 기본적인 scss 활용법이다. 익숙해지기만 한다면, 기존보다 작업속도가 향상 될수있을거같다.