Saamvoeging van selektorvolgordes in @extend in SASS

As ons selektorvolgordes moet saamvoeg, gebruik ons ook die @extend-direktief:

Kom ons kyk na die volgende voorbeeld:

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

Let op die saamgestelde kode in die css-lêer, wanneer twee volgordes sonder gemeenskaplike selektors saamgevoeg word, word nuwe selektors outomaties gevorm: een met die eerste volgorde voor die tweede en een met die tweede volgorde voor die eerste:

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

In die geval waar die volgordes 'n gemeenskaplike selektor het, sal hulle saamgevoeg word en slegs die verskille sal afgewissel word (indien enige). In die volgende voorbeeld het beide volgordes die identifiseerder #main:

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

As gevolg van die samestelling sal hierdie twee identifiseerders saamgevoeg word:

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

Verduidelik wat die resultaat van die samestelling van die volgende kode sal wees:

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