Sass Basics - Nesting

Nesting

HTML 은 중첩구조와 계층을 가지고 있는데, CSS 는 그렇지 않다.

Sass 는 HTML 과 같은 계층구조로 CSS 셀렉터를 구성할 수 있다. 심하게 중첩된 규칙은 필요이상의 CSS 가 만들어지기 때문에 유지보수를 어렵게 하고 나쁜 사례가 됨을 고려해야 한다.

아래는 일반적인 스타일의 사이트 네비게이션 예제이다.

### SCSS

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

  li { display: inline-block; }

  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

  }

}

```ul```, ```li``` ```a``` 셀렉터는 ```nav``` 셀럭터 내부에 중첩되어 있다. 이러한 구조는 CSS 를 체계화 하는데 좋은 방법이며 좀 더 읽기 쉽게 만든다. 생성된 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;

}

References

- http://sass-lang.com/guide