#5 - SCSS 중첩 - Nesting

SCSS 태그 중첩 ( Nesting )

SCSS에서는 스타일 안에 스타일을 넣어 태그 반복 사용을 줄일 수 있다.

SCSS

ul {
  width : 100%;
  height : 100%;
  li {
    width : 50%;
    height : 50%;
  }
}

Compile 된 CSS

ul {
  width: 100%;
  height: 100%;
}
ul li {
  width: 50%;
  height: 50%;
}

 

 

---

SCSS 속성 중첩 ( Nesting )

font / margin / padding 같은 개별 속성이 있는 경우, 아래와 같이 속성을 중첩하여 사용할 수 있다.

SCSS

.class {
  font: {
    size: 4px;
    weight: bold;
  }
  margin: {
    top: 10px;
    bottom: 20px;
  }
  padding: {
    right: 100px;
    left: 200px;
  }
}

Compile 된 CSS

.class {
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 20px;
  padding-right: 100px;
  padding-left: 200px;
}