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:

style.scss#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:

style.css#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:

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

Derleme netijesinde bu iki identifikator birleşdiriler:

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

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