Sass 중첩 규칙 

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 및 선택기는 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보다 깨끗하고 읽기 쉽습니다.

Sass 중첩 된 속성 

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

Sass를 사용하여 중첩 된 속성으로 작성할 수 있습니다.

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

Sass transpiler는 위의 내용을 일반 CSS로 변환합니다 :

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;