[SASS/SCSS] 중첩규칙

| 중첩규칙 [Nesting]

선택자를 선언문에서 계속 반복해서 쓰지않고, 선언문 안에 중첩하여 사용

SCSS를 중첩하여 사용하면 Sass는 선택자 전부를 생성하여 CSS에 반영

 

ex) SCSS

#heder{

  div{

    button{ .. } 

  }

}

 

ex) CSS

#heder div button{ .. }

 

#header{
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: lightgray;
   div{
        position: absolute;
        float: left;
        right: 8px;
        top: 6px;
        p{
            color: gray;
            display: inline-block;
        }
        button{
            padding: 6px 8px;
            border: 0;
            background-color: blue;
            color: #ffffff;
            border-radius: 6px;
        }
    }
}

 

---

참고책

웹디자이너를 위한 SASS