5. 중첩되는 속성

CSS에서는 앞글자가 중첩되는 속성들이 있다. 예를 들면 margin-top, margin-bottom, margin-left, font-weight, font-size ... 등등 앞 부분이 모두 중복 된다. SCSS에서는 이러한 중복되는 부분을 생략하여 속성을 정의할 수 있다.

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    top: 10px;
    bottom: 40px;
    left: 20px;
    right: 30px;
  };
}

box라는 요소를 꾸며줄 때 font, margin, padding이라는 속성을 괄호를 열어 위와 같이 설정해줄 수 있다. 설정한 후에는 ;(세미클론)을 붙혀야 한다는 점을 잊지말자. 아래는 CSS로 변환했을 때다.

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 30px;
}