$
라는 기호를 이용한다.
이 기호가 어떤 역할을 할까?
쉽게 말하면 &
는 상위의 선택자를 참조한다. 가령
.list {
li {
**&**:last-child {
margin-right: 0;
}
}
}
라고 작성하면 이는 CSS로
.list **li**:last-child {
margin-right: 0;
}
로 번역된다.
.fs {
&-small { font-size: 12px; }
&-medium { font-size: 14px; }
&-large { font-size: 16px; }
는 다음과 같이 번역된다.
.fs-small {
font-size: 12px;
}
.fs-medium {
font-size: 14px;
}
.fs-large {
font-size: 16px;
}