Sass @import та партіали
Sass зберігає CSS-код за принципом DRY (Don't Repeat Yourself - Не повторюйте себе). Один зі способів написання DRY коду – зберігати відповідний код в окремих файлах.
Ви можете створювати невеликі файли з фрагментами CSS для включення в інші файли Sass. Прикладами таких файлів можуть бути: файл скидання, змінні, кольори, шрифти, розміри шрифтів тощо.
Імпорт файлів Sass
Як і CSS, Sass також підтримує директиву @import.
Директива @import дозволяє включати вміст одного файлу в інший.
Директива CSS @import має серйозний недолік через проблеми з продуктивністю; він створює додатковий запит HTTP кожного разу, коли ви його викликаєте. Однак директива Sass @import включає файл у CSS; тому під час виконання не потрібен додатковий виклик HTTP!
Sass Синтаксис імпорту:
@import filename;
Підказка: Вам не потрібно вказувати розширення файлу, Sass автоматично припускає, що ви маєте на увазі файл .sass або .scss. Ви також можете імпортувати файли CSS. Директива @import імпортує файл, і будь-які змінні або міксини, визначені в імпортованому файлі, потім можна використовувати в основному файлі.
Ви можете імпортувати скільки завгодно файлів у головний файл:
Приклад
@import "variables";
@import "colors";
@import "reset";
Давайте розглянемо приклад: припустімо, що у нас є файл скидання під назвою "reset.scss", який виглядає так:
Приклад
SCSS Синтаксис (reset.scss):
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
і тепер ми хочемо імпортувати "reset.scss" в інший файл під назвою "standard.scss".
Ось як ми це робимо: нормально додавати директиву @import у верхній частині файлу; таким чином його вміст матиме глобальну область дії:
SCSS Синтаксис (standard.scss):
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Отже, коли файл "standard.css" транспільовано, CSS виглядатиме так:
CSS виведення:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Спробуйте самі »
Sass партіали (частки)
За замовчуванням Sass безпосередньо транспілює всі файли .scss. Однак, коли ви хочете імпортувати файл, вам не потрібно безпосередньо транспільувати файл.
Sass має механізм для цього: якщо ви починаєте ім’я файлу з підкреслення, Sass не буде транспілювати його. Файли з таким іменем у Sass називаються партіалами (частками).
Отже, частковий файл Sass має назву з підкресленням на початку:
Sass Синтаксис партіала:
_filename;
У наступному прикладі показано частковий файл Sass під назвою "_colors.scss". (Цей файл не буде транспільовано безпосередньо в "colors.css"):
Приклад
"_colors.scss":
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
Тепер, якщо ви імпортуєте частковий файл (партіал), опустіть підкреслення. Sass розуміє, що він повинен імпортувати файл "_colors.scss":
Приклад
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}
