[SASS/SCSS] 네임스페이스 속성 중첩사용 (font, background .. )

 

| 네임스페이스 속성 중첩

background, font 등 공통 네임 스페이스 속성을 중첩

 

 

.html  

간단한 div 안에 div는 아이콘(사진)과 닉네임을 출력

<div id="mypage">
  <div class="icon"></div>
  <p>Nickname</p>
</div>

.scss

공통 네임스페이스 속성을 중첩하여 스타일 적용

#mypage{
    div.icon{
        width: 8rem;
        height: 8rem;
        background: {
          image: url('~~~');
          size:86rem;
          repeat: no-repeat;
          position: center;
        }
    }
    p{
      margin: 0;
      font: {
        size: 2em;
        weight: bold;
      }
    }
}