SASS에서 @extend를 사용한 선택자 시퀀스 병합

선택자 시퀀스를 병합해야 하는 경우, 우리는 @extend 디렉티브를 사용합니다:

다음 예시를 살펴보겠습니다:

style.scss#main .list p {
  font-weight: bold;
}
#sub .resume .link {
  @extend p;
}

css 파일에서 컴파일된 코드를 주목하세요, 공통 선택자가 없는 두 시퀀스를 병합할 때, 자동으로 새로운 선택자들이 생성됩니다: 첫 번째 시퀀스가 두 번째 앞에 오는 하나와 두 번째 시퀀스가 첫 번째 앞에 오는 하나:

style.css#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
  font-weight: bold;
}

시퀀스들이 공통 선택자를 가지고 있는 경우, 그들은 함께 병합되고 차이점만 교대로 나타납니다 (존재한다면). 다음 예시에서 두 시퀀스 모두 #main 식별자를 가지고 있습니다:

style.scss#main .list p {
  font-weight: semi-bold;
}
#main .resume .link {
  @extend p;
}

컴파일 결과, 이 두 식별자는 병합됩니다:

style.css#main .list p,
#main .list #sub .resume .link, #sub .resume #main .list .link {
  font-weight: bold;
}

styles.scssdiv p {
  font-size: 12px;
  padding-bottom: 4px;
}
link button #card-title {
  @extend p;
}