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

Егер бізге селекторлар тізбегін біріктіру қажет болса, онда біз @extend директивасын да қолданамыз:

Келесі мысалды қарастырайық:

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

css файлындағы компиляцияланған кодқа назар аударыңыз, ортақ селекторлары жоқ екі тізбекті біріктірген кезде, жаңа селекторлар автоматты түрде құрылады: біріншісі бірінші тізбек екіншісінің алдында, ал екіншісі екінші тізбек біріншісінің алдында:

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

Тізбектерде ортақ селектор болған жағдайда, олар бірігіп қосылады және тек айырмашылықтар (егер бар болса) ауысып жатады. Келесі мысалда екі тізбекте де #main идентификаторы бар:

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

Компиляция нәтижесінде бұл екі идентификатор біріктіріледі:

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

Келесі кодты компиляциялау нәтижесі қандай болатынын түсіндіріңіз:

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