Sass Tutorial

Sass Nested Rules and Properties

Sass를 사용하면 HTML과 동일한 방식으로 CSS 셀렉터를 중첩할 수 있습니다.

사이트 네비게이션에 대한 일부 Sass 코드의 예제를 살펴보겠습니다.

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

Sass에서 ul, li 및 a 셀렉터는 nav 셀렉터 내부에 네스트되어 있습니다.

반면, CSS에서 규칙은 하나 씩 정의됩니다 (네스트되지 않음).

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
nav li {
  display: inline-block;
}
 
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sass에서 속성을 네스트할 수 있기 때문에, 표준 CSS보다 더 깔끔하고 읽기 쉽습니다.

많은 CSS 속성에는 font-family, font-size 및 font-weight 또는 text-align, text-transform 및 text-overflow와 같은 동일한 접두사(prefix)가 있습니다.

Sass를 사용하면 네스트된 속성으로 CSS 속성을 작성할 수 있습니다.

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}
 
text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

Sass 트랜스파일러(transpiler)는 위의 SCSS 파일을 일반 CSS로 변환합니다:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
 
text-align: center;
text-transform: lowercase;
text-overflow: hidden;