Sass @extend
Sass @extend direktivasi
@extend direktivasi bir selektordagi CSS xususiyatlari to‘plamini boshqa selektor bilan bo‘lishish imkonini beradi.
Agar deyarli bir xil uslubga ega bo‘lib, faqat ayrim mayda tafsilotlarda farq qiladigan elementlaringiz bo‘lsa, @extend direktivasi foydali.
Quyidagi Sass misolida avval tugmalar uchun asosiy uslub yaratiladi (bu uslub ko‘pchilik tugmalar uchun ishlatiladi). So‘ngra "Report" tugmasi uchun bitta va "Submit" tugmasi uchun bitta uslub yaratamiz. "Report" va "Submit" tugmalarining ikkalasi ham @extend direktivasi orqali .button-basic sinfidagi barcha CSS xususiyatlarini meros qilib oladi. Bundan tashqari, ularning har biri o‘z ranglariga ega:
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 quyidagi ko‘rinishda bo‘ladi:
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 foydalanganda HTML kodingizda element uchun bir nechta sinfni ko‘rsatishingiz shart emas, masalan: <button class="button-basic button-report">Report this</button>. Ikkala uslublar to‘plamini olish uchun faqat .button-report ni ko‘rsatish kifoya.
@extend direktivasi Sass kodingizni DRY tamoyiliga to‘liq mos holda saqlashga yordam beradi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!