Sass @import
Sass CSS kodini DRY (Don't Repeat Yourself — o‘zingizni takrorlamang) tamoyiliga mos holda saqlaydi. DRY kod yozishning bir usuli — o‘zaro bog‘liq kodni alohida fayllarda saqlash.
Boshqa Sass fayllariga ulash uchun CSS parchalaridan iborat kichik fayllar yaratishingiz mumkin. Bunday fayllarga misollar: reset fayli, o‘zgaruvchilar, ranglar, shriftlar, shrift o‘lchamlari va h.k.
Sass’da fayllarni import qilish
CSS kabi Sass ham @import direktivasini qo‘llab-quvvatlaydi.
@import direktivasi bir fayl tarkibini boshqa faylga qo‘shish imkonini beradi.
CSS’dagi @import direktivasi unumdorlik bilan bog‘liq jiddiy kamchilikka ega: u har safar chaqirilganda qo‘shimcha HTTP so‘rovi yaratadi. Sass’dagi @import direktivasi esa faylni CSS’ning o‘ziga qo‘shadi, shuning uchun bajarilish vaqtida qo‘shimcha HTTP so‘rovi talab qilinmaydi!
Sass import sintaksisi:
@import filename;
Maslahat: Fayl kengaytmasini ko‘rsatishingiz shart emas — Sass siz .sass yoki .scss faylni nazarda tutayotganingizni avtomatik ravishda tushunadi. CSS fayllarini ham import qilishingiz mumkin. @import direktivasi faylni import qiladi, shundan so‘ng import qilingan faylda aniqlangan har qanday o‘zgaruvchi yoki mixinlardan asosiy faylda foydalanish mumkin.
Asosiy faylga kerakli miqdordagi fayllarni import qilishingiz mumkin:
Misol
@import "variables";
@import "colors";
@import "reset";
Keling, misolni ko‘rib chiqamiz: aytaylik, bizda quyidagi ko‘rinishdagi "reset.scss" nomli reset fayli bor:
Misol
SCSS sintaksisi (reset.scss):
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
endi esa "reset.scss" faylini "standard.scss" nomli boshqa faylga import qilmoqchimiz.
Buni quyidagicha amalga oshiramiz: @import direktivasini fayl boshiga qo‘shish odatiy hol; shunda uning tarkibi global ko‘rinish sohasiga ega bo‘ladi:
SCSS sintaksisi (standard.scss):
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Shunday qilib, "standard.css" fayli transpilyatsiya qilinganda CSS quyidagi ko‘rinishda bo‘ladi:
CSS natijasi:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Sass partial fayllari (partials)
Standart holatda Sass barcha .scss fayllarini bevosita transpilyatsiya qiladi. Biroq faylni import qilmoqchi bo‘lsangiz, uning bevosita transpilyatsiya qilinishi shart emas.
Sass’da buning uchun maxsus mexanizm bor: agar fayl nomini pastki chiziq bilan boshlasangiz, Sass uni transpilyatsiya qilmaydi. Shu tarzda nomlangan fayllar Sass’da partial fayllar (partials) deb ataladi.
Demak, partial Sass faylining nomi pastki chiziq bilan boshlanadi:
Sass partial sintaksisi:
_filename;
Quyidagi misolda "_colors.scss" nomli partial Sass fayli ko‘rsatilgan. (Bu fayl bevosita "colors.css" ga transpilyatsiya qilinmaydi):
Misol
"_colors.scss":
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
Endi partial faylni import qilayotganda pastki chiziqni tushirib qoldiring. Sass "_colors.scss" faylini import qilish kerakligini tushunadi:
Misol
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!