[basic] SCSS - Nesting (안긴 형태)

1. 태그 안긴 형태
2. 속성 안긴 형태

태그 안긴 형태

SCSS

 

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

  li {

    display: inline-block;

  }

  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

  }

}

 

---

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

 

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;