Sass (Syntactically Awesome Style Sheets) — Xempton Katlin va Natali Vayzenbaum tomonidan 2006-yilda taqdim etilgan CSS preprotsessori. U CSS‘ga o’zgaruvchilar, funksiyalar va ichma-ich yozish kabi dasturlash tillariga xos imkoniyatlarni qo’shadi, bu esa uzoq vaqt davomida oddiy CSS‘da mavjud bo’lmagan.
CSS’ning yetishmovchiliklarini to’ldirish maqsadi
An’anaviy CSS‘da bir xil rang yoki o’lchamni o’nlab joyda qo’lda takrorlash kerak bo’lgan, bu esa dizaynni o’zgartirishda ko’plab joyni qo’lda tahrirlashni talab qilardi. Sass fayllari maxsus kompilyator orqali oddiy CSS‘ga aylantiriladi, bu jarayonda dasturchi yuqoridagi muammolarni dasturlash tillariga xos vositalar bilan hal qiladi.
O’zgaruvchilar va aralashmalar
Sass’da $asosiy-rang: #3498db kabi o’zgaruvchi e’lon qilib, uni butun fayl bo’ylab qayta ishlatish mumkin — rangni o’zgartirish uchun endi faqat bitta joyni tahrirlash kifoya. “Mixin” deb ataladigan mexanizm esa takrorlanuvchi uslub qoidalari to’plamini funksiya kabi qayta ishlatish imkonini beradi.
Ichma-ich yozish uslubi
Sass CSS selektorlarini HTML tuzilishiga o’xshash tarzda ichma-ich yozish imkonini beradi — masalan, .karta ichida .karta .sarlavha ni alohida yozish o’rniga, .sarlavha qoidasini to’g’ridan-to’g’ri .karta bloki ichiga joylashtirish mumkin. Bu uslub CSS faylining tuzilishini HTML iyerarxiyasiga yaqinlashtiradi.
SCSS va indented sintaksis
Sass ikki xil sintaksisda yoziladi: asl “indented” sintaksis figurali qavslar va nuqta-vergullarsiz, faqat bo’shliqqa asoslangan holda ishlaydi, SCSS esa oddiy CSS‘ga ko’proq o’xshash, figurali qavslardan foydalanadigan sintaksis hisoblanadi. Amaliyotda SCSS ancha keng qo’llaniladi, chunki u mavjud CSS kodini deyarli o’zgarishsiz qabul qila oladi.
CSS’ning o’zi rivojlanishi bilan ahamiyati
Zamonaviy CSS o’zi ham CSS Custom Properties (o’zgaruvchilar) va calc() kabi funksiyalarni kiritgani sababli, Sass’ning ba’zi afzalliklari endi oddiy CSS‘da ham mavjud. Shunga qaramay, mixin‘lar va murakkab mantiqiy konstruksiyalar kabi imkoniyatlar tufayli Sass hamon katta veb-loyihalarda keng qo’llaniladi.
Bog’liq tushunchalar
CSS, Preprocessor, SCSS, Less, Veb dizayn, O’zgaruvchi, Mixin