Import

Sass @import va Partials

Sass CSS kodini DRY (Don't Repeat Yourself) uslubida saqlaydi, ya'ni kodni qayta-qayta yozmaslikka yordam beradi. DRY kod yozishning bir usuli bog'liq kodlarni alohida fayllarga joylashtirishdir.

Siz boshqa Sass fayllariga qo'shish uchun kichik fayllar yaratishingiz mumkin, masalan: reset fayli, o'zgaruvchilar, ranglar, shriftlar, shrift o'lchamlari va boshqalar.

Sass Fayllarini Import qilish

CSS kabi, Sass ham @import direktivasini qo'llab-quvvatlaydi.

@import direktivasi bir faylning mazmunini boshqa faylga kiritish imkonini beradi.

CSSdagi @import direktivasining asosiy kamchiligi ish samaradorligiga ta'sir qiladi; har safar chaqirilganda qo'shimcha HTTP so'rovi yaratadi. Biroq, Sassdagi @import direktivasi faylni CSSga qo'shadi, shuning uchun ishlash paytida qo'shimcha HTTP so'rovi talab qilinmaydi!

Sass Import Sintaksisi:

@import fayl_nomi;

Maslahat: Fayl kengaytmasini ko'rsatish shart emas, Sass avtomatik ravishda .sass yoki .scss faylni nazarda tutadi deb qabul qiladi. Siz shuningdek, CSS fayllarini ham import qilishingiz mumkin. @import direktivasi faylni import qiladi va import qilingan faylda e'lon qilingan o'zgaruvchilar yoki mixinlarni asosiy faylda ishlatish mumkin bo'ladi.

Siz asosiy faylga kerakli bo'lgancha fayllarni import qilishingiz mumkin:

Misol

@import 'variables';
@import 'colors';
@import 'reset';

Misolga qaraylik: Faraz qilaylik, bizda reset.scss deb nomlangan reset fayli mavjud, u quyidagicha ko'rinadi:

Misol

SCSS Sintaksisi (`reset.scss`):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

Endi biz reset.scss faylini boshqa standard.scss deb nomlangan faylga import qilmoqchimiz.

Buni quyidagicha qilamiz: Faylning yuqorisida @import direktivasini qo'shish odatiy holdir; bu usulda uning mazmuni global doirada 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 quyidagicha ko'rinadi:

CSS Natijasi:

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}
 
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials

Odatiy holda, Sass barcha .scss fayllarini to'g'ridan-to'g'ri transpilyatsiya qiladi. Biroq, agar siz faylni import qilmoqchi bo'lsangiz, u faylni to'g'ridan-to'g'ri transpilyatsiya qilishning hojati yo'q.

Sass bu uchun mexanizmga ega: Agar fayl nomini pastki chiziq bilan boshlasangiz, Sass uni transpilyatsiya qilmaydi. Bunday nomlangan fayllar Sassda partials deb ataladi.

Shunday qilib, Sass faylini qisman yozish quyidagicha ko'rinadi:

Sass Partial Sintaksisi:

_filename;

Quyidagi misol _colors.scss deb nomlangan qisman Sass faylini ko'rsatadi. (Bu fayl to'g'ridan-to'g'ri colors.css ga transpilyatsiya qilinmaydi):

Misol

`_colors.scss`:

$myPink: #ee82ee;
$myBlue: #4169e1;
$myGreen: #8fbc8f;

Endi, agar siz qisman faylni import qilmoqchi bo'lsangiz, pastki chiziqni o'tkazib yuboring. Sass "_colors.scss" faylini import qilish kerakligini tushunadi:

Misol

@import 'colors';
 
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}

Ushbu sahifada