Директива @import
Писати увесь код в одному великому файлі незручно. Тому препроцесор SASS дозволяє зберігати стилі в окремих файлах і збирати їх як мозаїку. Такий модульний підхід до написання коду спрощує рефакторинг і підтримку кодової бази.
За замовчуванням SASS-компілятор створює CSS-файл для кожного Sass-файлу, який
зустріне в проекті. Для того щоб після компіляції отримати всього один файл
стилів, використовують фрагменти (partials) - звичайні Sass-файли, ім'я яких
починається з нижнього підкреслення, наприклад _logo.scss. Нижнє підкреслення
говорить компілятору про те, що це фрагмент і він не повинен компілюватися в
окремий CSS-файл, а буде використаний в іншому Sass-файлі.
На ілюстрації зображена базова структура Sass-файлів в проекті. В папці sass є
один головний файл main.scss, для якого після компіляції буде створений файл
main.css, який ми підключаємо в index.html. В папках utils і components
лежать фрагменти, які будуть частиною main.scss.
Для того щоб підключити фрагмент в інший Sass-файл, використовується директива
@import. Файл main.scss з прикладу буде виглядати наступним чином.
@import 'utils/colors';
@import 'utils/mixins';
@import 'components/header';
@import 'components/logo';
@import 'components/site-nav';
@import 'components/section';
Коли компілятор зустрічає директиву @import, він підставляє код імпортованого
файлу на місце імпорту. Після компіляції виходить один CSS-файл, скомпільований з декількох фрагментів.
Зверніть увагу на те, що ми використовуємо @import 'components/logo' у файлі
main.scss. Під час імпорту фрагмента не потрібно вказувати розширення .scss і нижнє підкреслення, SASS-компілятор здогадається сам і знайде цей файл.
Головне задати правильний відносний шлях.