Kirish

Sass Kirish

Nimalarni Bilishingiz Kerak

Davom etishdan oldin quyidagi tushunchalar haqida asosiy bilimga ega bo'lishingiz kerak:

• HTML
• CSS

Agar bu mavzularni avvalroq o'rganishni istasangiz, bizning Home sahifamizda darsliklarni topishingiz mumkin.

Sass nima?

• Sass – bu Syntactically Awesome Stylesheet degan ma’noni anglatadi.
• Sass – bu CSS kengaytmasi.
• Sass – bu CSS pre-protsessori.
• Sass barcha CSS versiyalari bilan to‘liq mos keladi.
• Sass CSS kodini takrorlashni kamaytiradi va vaqtni tejaydi.
• Sass 2006-yilda Hampton Catlin tomonidan yaratilgan va Natalie Weizenbaum tomonidan ishlab chiqilgan.
• Sass bepul yuklab olinadi va foydalaniladi.

Nega Sass ishlatish kerak?

Stil jadvallari (stylesheets) tobora kattaroq, murakkabroq va boshqarish qiyinroq bo‘lib bormoqda. CSS pre-protsessori bu jarayonda yordam beradi.

Sass sizga CSSda mavjud bo‘lmagan xususiyatlardan foydalanish imkonini beradi, masalan: o'zgaruvchilar (variables), ichma-ich qoidalar (nested rules), mikslash (mixins), importlar, meros olish (inheritance), o'rnatilgan funksiyalar va boshqa imkoniyatlar.

Sass nima uchun foydali ekaniga oddiy misol

Tasavvur qiling, bizda uchta asosiy rangga ega sayt bor:

• #a2b9bc
• #b2ad7f
• #878f99

Shunday bo'lsa, bu HEX qiymatlarni necha marta yozishingiz kerak? Juda ko'p marta. Va shu ranglarning turli variatsiyalarini ham ishlatishingiz kerak bo‘lsa-chi?

Bu qiymatlarni ko‘p marta yozish o‘rniga, Sass orqali quyidagi tarzda yozishingiz mumkin:

Sass Misol

/* asosiy ranglar uchun o'zgaruvchilarni aniqlaymiz */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
 
/* o'zgaruvchilarni ishlatamiz */
.main-header {
  background-color: $primary_1;
}
 
.menu-left {
  background-color: $primary_2;
}
 
.menu-right {
  background-color: $primary_3;
}

Shunday qilib, Sassdan foydalanganda, asosiy rang o'zgarsa, uni faqat bitta joyda o'zgartirish kifoya bo'ladi.

Sass qanday ishlaydi?

Brauzer Sass kodini tushunmaydi. Shuning uchun Sass kodini standart CSS kodiga aylantiradigan Sass pre-protsessor kerak bo‘ladi.

Bu jarayon transpilyatsiya deb ataladi. Shunday qilib, siz transpilyator (ba'zi dastur)ga Sass kodini berasiz va evaziga CSS kodini olasiz.

Maslahat: Transpilyatsiya – bu bir tilida yozilgan manba kodini boshqa bir tilga aylantirish jarayonidir.

Sass fayl turi

Sass fayllarining kengaytmasi ".scss" bo‘ladi.

Sass kommentlari

Sass standart CSS kommentlarini qo‘llab-quvvatlaydi /* comment */, va qo‘shimcha ravishda inline kommentlarni ham qo‘llab-quvvatlaydi // comment:

Sass Misol

/* asosiy ranglarni aniqlaymiz */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
 
/* o'zgaruvchilarni ishlatamiz */
.main-header {
  background-color: $primary_1; // bu yerda inline komment yozishingiz mumkin
}