Mavzu 5-6: css frameworklari: Sass

Mavzu 5-6: CSS frameworklari:Sass
Sass. Sassga kirish. Sass yordamida css fayllar generatsiya qilish. Sass asosida yaratilgan frameworklar. (https://sass-lang.com/guide)
Sass (Syntactically Awesome Style Sheets) 
CSS-ning o'zi qiziqarli bo'lishi mumkin, ammo uslublar jadvallari tobora kattalashib boraveradi, murakkablashmoqda va saqlash qiyinroq. Bu erda protsessor yordam berishi mumkin. Sass sizga CSS-da hali mavjud bo'lmagan o'zgaruvchilar, joylashtiruvchilar, aralashmalar, merosxo'rlik va boshqa CSS-ni yozishni qiziqarli qiladigan boshqa xususiyatlardan foydalanishga imkon beradi.
Sass bilan ishlashni boshlaganingizdan so'ng, u oldindan ishlangan Sass faylingizni oladi va uni veb-saytingizda ishlatishingiz mumkin bo'lgan oddiy CSS fayli sifatida saqlaydi. Buni amalga oshirishning eng to'g'ridan-to'g'ri usuli sizning terminalingizda. Sass o'rnatilgandan so'ng, sass buyrug'i yordamida Sass-ni CSS-ga kompilyatsiya qilishingiz mumkin. Siz Sass-ga qaysi faylni qurishni va CSS-ni qayerga chiqarishni aytishingiz kerak. Masalan, sizning sass input.scss
Siz shuningdek shaxsiy fayllarni yoki kataloglarni --watch bayrog'i bilan ko'rishingiz mumkin. Sass-ga sizning fayllaringizni o'zgartirishlaringizni ko'rish va Sass-ni har safar saqlab qo'yganingizda CSS-ni qayta kompilyatsiya qilishni buyuradi.

sass --watch input.scss output.css

Siz kirish va chiqish sifatida papka yo'llaridan foydalanib va ularni ikkita nuqta bilan ajratib kataloglarga chiqishingiz va chiqishingiz mumkin. Ushbu misolda:

sass --watch app/sass:public/stylesheets

Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder.


O‘zgaruvchilar
O'zgaruvchini barcha jadval qayta ishlatmoqchi bo'lgan ma'lumotni saqlash usuli sifatida o'ylab ko'ring. Siz ranglar, shriftlar to'plamlari yoki siz qayta ishlatmoqchi bo'lgan har qanday CSS qiymati kabi narsalarni saqlashingiz mumkin. Sass biror narsani o'zgaruvchan qilish uchun $ belgisini ishlatadi. Bunga misol:



Sass qayta ishlanganida, biz $ font-stack va $ basic color uchun aniqlanadigan o'zgaruvchini olamiz va CSS-ga joylashtirilgan o'zgaruvchan qiymatlarimiz bilan normal CSS-ni chiqaramiz. Bu marka ranglari bilan ishlashda va ularni butun sayt bo'ylab izchil saqlashda juda kuchli bo'lishi mumkin.
HTML-ni yozayotganda, siz aniq aniqlangan va vizual ierarxiyaga ega ekanligini payqadingiz. Boshqa tomondan, CSS bunday qilmaydi.
Sass sizga CSS tanlovchilaringizni HTML-ning xuddi shu vizual ierarxiyasiga mos keladigan tarzda joylashtirishga imkon beradi. Shuni yodda tutingki, haddan tashqari o'rnatilgan qoidalar CSS-ning yuqori malakaga ega bo'lishiga olib keladi, bu esa saqlab qolish qiyin bo'lgan va odatda yomon ish hisoblanadi.
Shuni yodda tutgan holda, saytni navigatsiya qilish uchun ba'zi odatiy uslublarning namunalari keltirilgan:



Siz ul, li va selektor navigator selektoriga joylashtirilganligini ko'rasiz. Bu CSS-ni tartibga solish va uni o'qishga imkon berishning ajoyib usuli.
Siz boshqa Sass fayllariga qo'shishingiz mumkin bo'lgan CSS-ning kichik qismlarini o'z ichiga olgan qisman Sass fayllarini yaratishingiz mumkin. Bu sizning CSS-ni modullashtirishning eng yaxshi usuli va uni saqlashni osonlashtirishga yordam beradi. Qisman bu Sass fayli bo'lib, u etakchi pastki chiziqcha bilan ko'rsatiladi. Siz uni _partial.scss kabi nomlashingiz mumkin. Pastki chiziq Sass-ga ushbu fayl faqatgina qisman fayl ekanligini va uni CSS-faylga yaratmaslik kerakligini bilishga imkon beradi. Sass qismlardan @use qoidasi bilan foydalaniladi.