중첩 규칙

nested rules, nesting

중첩 규칙, 중첩 룰; 중첩

1 Less/SCSS

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

2 Sass

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

3 같이 보기

• less
• Sass
• SCSS
• 네스팅 (nesting)

4 참고

• http://lesscss.org/features/
• http://sass-lang.com/guide