[Sass 특징] Nesting (중첩)

Sass가 css와 다른 중요한 특징 중에 하나는

바로 Nesting이다.

즉, css를 중첩해서 사용할 수 있다는 것이다.

 

개인적으로 이 속성이 Sass의 가장 큰 매력이라고 생각한다.

 

css와 Sass의 소스를 비교해보면 어떻게 다른지,

어떤 점이 그렇게 매력적인지 알 수 있다.

/* css */
.main .content{text-align:center;}
.main .content p{text-align:left;}
.main .content span{display:inline-block;}
.main .content .txt p{color:red;}

/* Sass (SCSS) */
.main{
   .content{
      text-align:center;
      p{text-align:left;}
      span{display:inline-block;}
      .txt p{color:red;}
   }
}

위의 소스를 보면 .main 이라는 클래스 하위에 있는 영역들에 대한 수정을 하는 내용임을 알 수 있다.

 

.main 아래 .content 아래 p나 span등을 수정하기 위해서는

.main이라는 클래스를 상속해야하기 때문에 매번 .main을 반복해서 작성을 해야한다.

 

하지만 Sass 문법을 적용하게 되면

.main 이나 .content와 같이 반복되는 클래스 들을 한 번만 작성하여

편리함을 누릴 수 있다.

 

위의 소스만 봤을 때 css가 더 사용하게 편해보일 수도 있지만

방대한 양의 소스를 작성하다보면 Sass의 편리함에 감탄하게된다.