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

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