[basic] LESS - Nesting (중첩 = 안긴 형태)

태그 안긴 형태

style.less

 

#header {

    color: black;

    .navigation {

        font-size: 12px;

    }

    .logo {

        width: 300px;

    }

}

 

---

style.css

 

#header {

    color: black;

}

#header .navigation {

    font-size: 12px;

}

#header .logo {

    width: 300px;

}

 

현재 선택자 부모 표시 : & 기호 사용 

style.less

 

.clearfix {

    display: block;

    zoom: 1;

    &:after {

        content: " ";

        display: block;

        font-size: 0;

        height: 0;

        clear: both;

        visibility: hidden;

    }

}

 

---

style.css

 

.clearfix {

  display: block;

  zoom: 1;

}

.clearfix:after {

    content: " ";

    display: block;

    font-size: 0;

    height: 0;

    clear: both;

    visibility: hidden;

}

 

※ & 기호 : 현재 선택자 부모를 표시.