SASS

문법

모든 문법 작성은 SCSS 기준으로 작성한다.

규칙 네스팅

중괄호 속에 하위 요소에 대한 스타일을 지정하는 형태로 네스팅한다.

#main p {
    color: #00ff00;
    width: 79%;
    .redbox {
        background-color: #ff0000;
        color: #000000;
    }
}
// complied:
#main p {
    color: #00ff00;
    width: 79%;
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000;
}

상위요소 참조

블럭 내에서 &를 사용하면, 블럭의 주인 즉 현재 스코프의 부모 요소를 참조하게 된다.

#main {
    color: black;
    a {
        font-weight: bold;
        &:hover { // >> a:hover
            color: red;
        }
    }
}

더 보기 »SASS 간단정리