Імпорт файлів, webreference

Поділ одного великого документа на безліч маленьких спрощує розробку, тому що код стає простіше і наочніше, його легше налагоджувати. Для завантаження одного файлу з іншого в Sass застосовується команда @import і незважаючи на схожість написання вона відрізняється за своєю дією від стильового правила @import. В CSS імпорт впливає на час завантаження сторінки в цілому через те, що кожен файл вимагає окремого мережевого запиту. Чим більше таких файлів, тим гірше для продуктивності сайту.

У Sass немає ніяких проблем з продуктивністю або часом завантаження сторінок, тому що безліч маленьких файлів в результаті об'єднуються в один єдиний стильовий файл. Таким чином зберігається зручність редагування файлів і підключення сторонніх бібліотек з високою швидкістю завантаження стилів.

Традиційно підключаються файли починаються з символу підкреслення, так ми відразу розуміємо про їх допоміжної ролі. При цьому саме підкреслення, так само як і розширення файлу в команді @import не пишеться.

Для прикладу створимо файл _reset.scss і в ньому пропишемо наступний код.

Тепер для додавання цього коду в наш основний стильовий файл досить написати.

І в кінцевому CSS-файлі замість @import буде додано вміст _reset.scss.

На імпорті файлів побудовані бібліотеки домішок типу Bourbon. Досить імпортувати бібліотеку і можна в свій код додавати величезна кількість вже готових штук. Ось, наприклад, як зробити лінійний градієнт.

В CSS ми отримаємо готовий градієнт з уже доданими Вендорний префіксами.

Схожі статті