სელექტორთა მიმდევრობების გაერთიანება @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 .resume .link, .resume #main .list .link {
	font-weight: bold;
}

ახსენით, როგორი იქნება კომპილაციის შედეგი შემდეგი კოდის:

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