@extend арқылы SASS-та селекторлар тізбегін біріктіру

Егер бізге селекторлар тізбегін біріктіру қажет болса, онда біз @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;
}