SASS의 @extend에서 !optional 플래그
셀렉터를 확장할 때, 지시어 @extend가
올바르게 작동하지 않아 오류가 발생할 수 있습니다.
예를 들어, 다음과 같은 코드가 있을 때:
a.info {
@extend .main;
}
어떤 셀렉터도 .main을 포함하지 않으면,
컴파일 시 오류가 발생합니다.
이런 경우 우리는 셀렉터 시퀀스를 병합해야 하며,
이를 위해 지시어 @extend를 사용합니다.
게다가, .main를 포함하는 셀렉터가
h1.main와 같은 경우에도 오류가 발생합니다.
이는 a와 h1 사이의 충돌로 설명됩니다.
따라서, 필요할 경우 !optional 플래그를
셀렉터 뒤에 작성하여 지시어 @extend가
새로운 셀렉터를 생성하지 않도록 허용할 수 있습니다.
예를 들어:
a.info {
@extend .main !optional;
}
