SASS 간단정리
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;
}
}
}