SASS-daky @extend-dä saýlaýjylaryň yzly-ýerly görnüşlerini birleşdirmek

Eger bize saýlaýjylaryň yzly-ýerly görnüşlerini birleşdirmek gerek bolsa, onda biz şeýle hem @extend direktiwany ulanýarys:

Indiki mysaly gözden geçireýli:

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

css faýlyndaky derlenen koda üns beriň, iki yzly-ýerly görnüşi birleşdirýärkä, eger olaryň umumy saýlaýjylary ýok bolsa, onda awtomatiki ýagdaýda täze saýlaýjylar emele gelýär: biri birinji yzly-ýerly görnüş bilen ikinjiniň öňünde we beýlekisi ikinji yzly-ýerly görnüş bilen biriniň öňünde:

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

Ýzly-ýerly görnüşleriň umumy saýlaýjysy bar bolan ýagdaýda, olar bilelikde birleşdiriler we tapawutlar diňe şol üýtgeýän bölekler üçin çalşylar (eger şeýne bar bolsa). Indiki mysalda iki yzly-ýerli görnüş hem #main identifikatoryna eýe:

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

Derleme netijesinde bu iki identifikator birleşdiriler:

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

Aşakdaky kodyň derleme netijesi näme bolar?

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