Extend

Sass @extend va Merosxo'rlik

@extend direktivasi bir selektordan boshqasiga CSS xususiyatlarini ulash imkonini beradi.

@extend direktivasi o'xshash uslubdagi elementlar uchun juda foydali, faqat ayrim kichik tafovutlar mavjud bo'lganda ishlatiladi.

Quyidagi Sass misoli avval tugmalar uchun asosiy uslub yaratadi (bu uslub ko'pchilik tugmalar uchun ishlatiladi). Keyin, "Report" va "Submit" tugmalari uchun alohida uslub yaratiladi. Ikkala "Report" va "Submit" tugmalari .button-basic sinfidan barcha CSS xususiyatlarini @extend direktivasi orqali meros qilib oladi. Qo'shimcha ravishda, ularning o'ziga xos ranglari ham aniqlangan:

SCSS Sintaksisi:

.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
 
.button-report {
  @extend .button-basic;
  background-color: red;
}
 
.button-submit {
  @extend .button-basic;
  background-color: green;
  color: white;
}

Kompilyatsiyadan so'ng CSS quyidagicha ko'rinadi:

CSS Natijasi:

.button-basic,
.button-report,
.button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
 
.button-report {
  background-color: red;
}
 
.button-submit {
  background-color: green;
  color: white;
}

@extend direktivasidan foydalanish orqali HTML kodingizda elementga bir nechta sinflarni belgilashingiz shart emas, masalan: <button class="button-basic button-report">Report this</button>. Siz faqat .button-report sinfini belgilashingiz kifoya, va ikkala uslub to'plamini olasiz.

@extend direktivasi Sass kodingizni juda DRY (Don't Repeat Yourself) saqlashga yordam beradi.