Tarkib
CSS faxriysining Sass-ni birinchi marta kashf etishini tomosha qilish har doim qiziqarli bo'ladi. Uyalar, o'zgaruvchilar va aralashmalar kabi tushunchalar juda tabiiy ko'rinadi va sintaksis xotiraga bag'ishlanganidan so'ng, ularning mavjudligidan oldinroq vaqtni eslash qiyin. Yengillik - bu eng keng tarqalgan hissiyot: o'n oltinchi qiymatlarni qo'lda prefiks qilish va nusxalash kunlari o'tganligini tan olish.
Preextrotsessorida topilgan asosiy tushunchalardan @extend uchta sabab bilan ajralib turadi: u sizning ish oqimingizni tubdan o'zgartirish uchun eng yuqori salohiyatga ega; noto'g'ri foydalanish uslublar jadvalining sog'lig'i uchun xavfli; va yangi kelganlar u bilan boshqa Sass funktsiyalariga qaraganda ko'proq kurashmoqdalar. @Extend-dan xavfsiz foydalanishni boshlash uchun ilova qilingan naqshlarga amal qiling.
- Ushbu o'quv qo'llanmaning manba kodini yuklab oling
Kengaytma qo'shilmoqda
Ikkita selektor standart CSS-da uslublarni almashganda, munosabatlar vergul bilan ajratilgan ro'yxatda ko'rsatilgan:
.sidebar, .notice {margin: 20px; }}
Sass selektorlarni @extend direktivasi bilan birlashtiradi:
.sidebar {margin: 20px; } .xabarnoma {@extend .sidebar; }}
Bu kichik miqyosda samarasiz bo'lib tuyulishi mumkin, ammo sehr bu aloqalarni sizning uslublar jadvalingizning istalgan joyidan yaratish qobiliyatida. Tanlovchining istalgan raqami (yoki turi) .sidebar-da joylashgan uslublarni kengaytirishi mumkin. Bu sizning tanlovchilarni qo'lda birlashtirishga majbur qilmasdan xususiyatlarni yangilash uchun bitta joy yaratadi. Keling, yanada keng tarqalgan naqshni ko'rib chiqaylik. Ushbu juda oddiy misol oddiy tugma sinfini yaratish va asosiy xususiyatlarini o'zgartirish uchun qo'shimcha sinflarni qanday qo'shishni ko'rsatadi:
.btn {shrift og'irligi: qalin; } .btn-xato {fon: qizil; } .btn-next {background: green; }
HTML-ga .btn va .btn-xato sinflarini qo'shishdan ko'ra, qizil tugma kerak bo'lganda, asosiy tugma uslublarini xato holatiga o'tkazing:
.btn-error {@extend .btn; fon: qizil; }
Endi bizning Sass kompilyatsiya qilganda .btn selektori .btn, .btn-error bo'ladi. Ro'yxat avtomatik ravishda saqlanadi va elementga .btn-error qo'shilishi barcha kerakli uslublarni qo'llaydi.
Tuzoqlarni kengaytiring
Nesting singari, @extend direktivasi mas'uliyatsiz ishlatilsa yoki natijada paydo bo'lgan aloqalarni tushunmasdan muammolarga olib kelishi mumkin.
Tugmalar misolida davom etamiz .btn-next ichida .btn -btn-next kabi kengaytirilganga o'xshab ko'ring .btn-error. Oxir-oqibat, forma ichida paydo bo'lganda, biz asosiy tugmani sozlashimiz kerak bo'ladi:
form .btn {chegara radiusi: 5px; }
Odatda, bu to'g'ri uslubni o'zgartirish. Ammo .btn kengaytiradigan boshqa selektorlar .btn paydo bo'lganda tenglamaga kiritiladi:
shakl .btn, shakl .btn-xato, shakl .btn-keyingi {chegara radiusi: 5px; }
Ba'zi hollarda, .btn-ni kengaytiradigan hamma narsaning bu erga qo'shilishini xohlaysiz, bu kichik hajmdagi ish emas. Ammo, agar o'nlab sinflar tayanch tugmachasini kengaytirgan bo'lsa va natijada olingan zanjirga muhtoj bo'lmasak, biz shishib ketamiz. O'rta va katta hajmdagi dasturlarda noto'g'ri bajarilgan kengaytmalar sizning fayl hajmingizga qo'shimcha ravishda 30% yoki undan ko'proq narsani osonlikcha kiritishi mumkin. Yomon uyalash bilan birlashganda, bu jiddiy muammoga aylanishi mumkin.
Joylashtiruvchi tanlovchilar
Joylashtiruvchi selektorlar Sass 3.2-da taqdim etilgan va o'z-o'zidan selektorga kompilyatsiya qilinmaydigan kengaytirilgan kancani taklif qilishadi. Keraksiz @extend tanlovchilar guruhlari bilan kurashish uchun joyni tanlash vositasini ishga soling:
% yon panel {margin: 20px; } .notice {@extend% yon panel; }
% Belgisi joy tanlash moslamasini bildiradi va faqat biror narsa kengaytirilganda tuzilgan uslublarni o'zgartiradi. Bizning tugmachadagi misolimizga qarab, asl kengaytmalarni olib tashlashga urinib ko'ring va o'rniga joy tanlash vositasidan foydalaning:
.btn,% btn {font-weight: qalin; } .btn-xato {@extend% btn; fon: qizil; } .btn-next {@extend% btn; fon: yashil; }
Joylashtiruvchi selektori qo'shilishi bilan bizning ikkita modifikator sinfimiz .btn selektor o'rniga to'ldiruvchini kengaytiradi. Bu .btn atributlarini shishirmasdan qayta ishlatishga (va qamrab olishga) imkon beradi. Agar biz .btn selektorini o'z-o'zidan ishlatishga hojat qolmagan bo'lsa, bu erda faqat joy egasi ishlatilishi mumkin.
form .btn {chegara radiusi: 5px; }
Endi .btn-ga kiritilgan o'zgartirish oddiygina .btn-ni shakllantirish uchun tuziladi va biz shish paydo bo'lish xavfini olib tashladik.
Har doim tuzilgan uslublar jadvallarini noto'g'ri tanlangan uzun zanjirlar va uzunliklar uchun tekshiring. Aytish kerakki, @extend, nesting va placeholder selektorlari bilan tajriba qilib ko'ring. To'liq tushunish uchun bir nechta sinov va xatolarni talab qiladi, lekin juda ajoyib tuzilishga imkon beradi.
So'zlar: Nik Uolsh
Ushbu maqola dastlab net jurnalining 239-sonida paydo bo'ldi
