Sass – 중첩 규칙 및 속성

w3.css

Sass 중첩 규칙

Sass를 사용하면 HTML과 같은 방식으로 CSS 선택기를 중첩할 수 있다.

사이트 탐색을 위한 Sass 코드를 확인해보자.

Sass 구문

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

  li {

    display: inline-block;

  }

  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

  }

}

&nbps;

Sass에서는 ul, li, a 선택기가 탐색 선택기 안에 중첩되어 있다.

CSS에서는 규칙이 하나씩 정의된다(중첩되지 않음).

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;

}

공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자.

Sass에서는 속성을 중첩할 수 있으므로 표준 CSS보다 깔끔하고 읽기 쉽다.

Sass 중첩 속성

많은 CSS 속성은 font-family, font-size 및 font-weight나 text-align, text-transform 및 text-overflow와 같이 동일한 접두사를 갖는다.

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

Scss 구문

font: {

  family: Helvetica, sans-serif;

  size: 18px;

  weight: bold;

}

text: {

  align: center;

  transform: lowercase;

  overflow: hidden;

}

CSS 구문

font-family: Helvetica, sans-serif;

font-size: 18px;

font-weight: bold;

text-align: center;

text-transform: lowercase;

text-overflow: hidden;