중첩속성

텍스트CSS를 작성하다 보면 font-size, font-weight 처럼 공통적으로 들어가는 font-같은 부분이 있다.
이런 부분을 좀더 간편하게 해주는 방법이 SCSS의 중첩 속성을 이용하는 방법이다.

네임스페이스뒤에 ':'과 중괄호 뒤에 ;입력을 주의하자

// 중첩된 속성, 네임스페이스가 동일할때

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

// css compile

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