Sass bilan tanishuv
Oldindan nimalarni bilishingiz kerak
Davom etishdan oldin quyidagilar haqida asosiy tushunchaga ega bo‘lishingiz kerak:
- HTML
- CSS
Agar avval shu mavzularni o‘rganmoqchi bo‘lsangiz, tegishli darsliklarni bosh sahifamizda topasiz.
Sass nima?
- Sass — Syntactically Awesome Stylesheet (sintaktik jihatdan ajoyib uslublar jadvali) so‘zlarining qisqartmasi
- Sass — CSS’ning kengaytmasi
- Sass — CSS preprotsessori
- Sass CSS’ning barcha versiyalari bilan to‘liq mos keladi
- Sass CSS’dagi takrorlanishlarni kamaytiradi va shu tufayli vaqtni tejaydi
- Sass’ni 2006-yilda Hampton Catlin loyihalagan va Natalie Weizenbaum ishlab chiqqan
- Sass’ni yuklab olish va ishlatish bepul
Nima uchun Sass’dan foydalanish kerak?
Uslublar jadvallari (stylesheet) tobora kattalashib, murakkablashib, ularni qo‘llab-quvvatlash qiyinlashib bormoqda. Aynan shu yerda CSS preprotsessori yordam berishi mumkin.
Sass yordamida CSS’da mavjud bo‘lmagan imkoniyatlardan foydalanishingiz mumkin:o‘zgaruvchilar, ichma-ich qoidalar, mixinlar, importlar, vorislik, o‘rnatilgan funksiyalar va boshqalar.
Sass nega foydali ekaniga oddiy misol
Aytaylik, bizda uchta asosiy rangga ega veb-sayt bor:
#a2b9bc
#b2ad7f
#878f99
Xo‘sh, bu HEX qiymatlarni necha marta yozishingizga to‘g‘ri keladi? JUDA KO‘P marta. Xuddi shu ranglarning turli variantlari-chi?
Yuqoridagi qiymatlarni ko‘p marta yozish o‘rniga Sass’dan foydalanib, quyidagicha yozishingiz mumkin:
Sass misoli
/* define variables for the primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* use the variables */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
Demak, Sass’dan foydalanganda asosiy rang o‘zgarsa, uni faqat bitta joyda o‘zgartirishingiz kifoya.
Sass qanday ishlaydi?
Brauzer Sass kodini tushunmaydi. Shu sababli Sass kodini standart CSS’ga aylantirish uchun sizga Sass preprotsessori kerak bo‘ladi.
Bu jarayon transpilyatsiya (transpiling) deb ataladi. Ya’ni transpilyatorga (qandaydir dasturga) Sass kodini berasiz va evaziga CSS kodini olasiz.
Maslahat: Transpilyatsiya — bir tilda yozilgan manba kodni olib, uni boshqa tilga aylantirish/o‘girishni anglatuvchi atama.
Sass fayl turi
Sass fayllari ".scss" kengaytmasiga ega.
Sass izohlari
Sass standart CSS izohlarini /* comment */ qo‘llab-quvvatlaydi, bundan tashqari, bir qatorli (inline) izohlarni // comment ham qo‘llab-quvvatlaydi:
Sass misoli
/* define primary colors */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* use the variables */
.main-header {
background-color: $primary_1; // here you can put an inline comment
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!