Директива @import є і в звичайному CSS, вона служить для імпорту однієї таблиці стилів (або декількох) в іншу. Мова SASS розширює дану директиву, хоча грамотніше сказати компілятор SASS розширює дану директиву.
Оскільки SASS відноситься до препроцесорну мов, то в директиву @import були додані нові можливості. Раз компілятор все одно з SCSS-файлу компілює CSS-ку, то він цілком зможе через директиву @import безпосередньо включити стилі наших SCSS-файлів. Якщо правильно налаштувати компілятор. то можна на виході отримати один CSS-файл. Таким чином SCSS-файли будуть структуровані, у нас будуть "header.scss", "basket.scss" і тд, а на виході ми отримаємо один CSS-файл. Деякі розробники називають цей процес фрагментованість, або розбиттям на блоки. Раз все одно відбувається включення SCSS-файлів, то директиву @import не обов'язково підключати тільки на початку файлу, її можна підключити в будь-якому місці. Тож почнемо:
Файл наприклад main.scss
Після компіляції ми отримаємо файл "main.css" зі стилями з файлу "header.scss". Для підключення SCSS-файлу не обов'язково указиваеть його розширення. наприклад:
Після компіляції ми отримаємо як і в минулий раз файл "main.css" зі стилями з файлу "header.scss". Оскільки ми користуємося компілятором, то ми може відійти від стандартних правил CSS і підключати файли таким чином:
@import "header", "basket", "catalog";
Після компіляції ми отримаємо файл main.css зі стилями з файлу "header.scss", "basket.scss", "catalog.scss".
Включення SCSS-файлу через директиву @import не відбудеться (@import буде виведений за правилами CSS) якщо:
margin. 30px 10px;
Як ми можемо помітити з прикладу вище, відбулося включення стилів з файлу "example.scss" в "main.scss". При цьому включення сталося не просто в файл, а в клас sidebar. адже ми підключили директиву @import для класу sidebar. У нас застосували вкладені правила.
Отже, що варто підключати через директиву @import. Все залежить від розміру проекту. Чим більше проект, тим на більшу кількість блоків варто його розбивати. Якщо ж проект маленький (сайт-візитка, простенький блог), то не варто особливо перейматися з приводу розбивки на окремі блоки, але і в цьому випадку варто винести в окремі блоки плагіни (fancyBox, colorbox, jcarousel і тд). Ми вже вивчили змінні. тому ви цілком зможете винести в окремі змінні ті речі які ви найчастіше стилізуєте в цих плагинах. Наприклад в fancybox дизайнери стилізують: кнопку закриття, стрілки прокрутки, підкладку для фоток. Картинки цих елементів і їх розміри цілком можна винести в змінні, щоб потім їх не шукати. Так ви збільшите швидкість вашої роботи. Для інтернет-магазинів я зробив окремі блоки для кошика, каталогу. Я просто підключаю код через директиву @import. міняю змінні, і все готово, навіть верстати нічого не потрібно. Якщо ви робите типові речі, а дизайнери рідко щось нове придумують, не полінуйтеся винести їх в змінні, другий раз ви їх зверстати швидше, а швидше за все ви їх і верстати не будете, просто підключіть, поміняєте змінні, і цього цілком вистачить.
Директива @import і css-framework-і
Говорячи про директиву @import не можливо не сказати про CSS-framework-ах. На SASS-е написані такі framework-й: zurb foundation. gumby. bourbon. і це далеко не повний список. Мало хто знає, але ви можете завантажити SCSS-файли даних framework-ів. Якщо не виходить скачати SCSS-файли з офіційних сайтів, ви завжди зможете знайти їх на github-е. Ці framework-і мають свої компоненти, mixin-и, керуючі конструкції, файли налаштувань. Використовуючи SASS ви зможете більш гнучко налаштовувати дані framework-й. Просто підключаючи дані framework-і через звичайний CSS, ви такої гнучкості не отримаєте.
Давайте я все поясню на конкретному прикладі. Припустимо, ви хочете підключити до вашого проекту пагінацію, таку як на zurb foundation. Все, що вам для цього буде потрібно, так це завантажити SASS-версію zurb foundation (її можна завантажити з офіційного сайту) і підключити через директиву @import файл "_pagination.scss" (в 5 zurb foundation він лежить в папці foundation / components). У самому верху файлу "_pagination.scss" знаходиться 20 змінних, змінюючи їх ви зможете налаштувати пагінацію так як вам зручно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
$ Include-pagination-classes. $ Include-html-classes! Default;
$ Pagination-height. rem-calc (24)! default;
$ Pagination-margin. rem-calc (-5)! default;
$ Pagination-li-float. $ Default-float! Default;
$ Pagination-li-height. rem-calc (24)! default;
$ Pagination-li-font-color. $ Jet! Default;
$ Pagination-li-font-size. rem-calc (14)! default;
$ Pagination-li-margin. rem-calc (5)! default;
$ Pagination-link-pad. rem-calc (1 10 1)! default;
$ Pagination-link-font-color. $ Aluminum! Default;
$ Pagination-link-active-bg. scale-color ($ white, $ lightness: -10%)! default;
$ Pagination-link-unavailable-cursor. default! default;
$ Pagination-link-unavailable-font-color. $ Aluminum! Default;
$ Pagination-link-unavailable-bg-active. transparent! default;
$ Pagination-link-current-background. $ Primary-color! Default;
$ Pagination-link-current-font-color. $ White! Default;
$ Pagination-link-current-font-weight. $ Font-weight-bold! Default;
$ Pagination-link-current-cursor. default! default;
$ Pagination-link-current-active-bg. $ Primary-color! Default;
Детально описувати компоненти zurb foundation це тема не на одну статтю. Можу сказати, що в zurb foundation є компоненти для форм, кнопок, плагінів, ви можете взяти тільки сітку якщо захочете. Це дуже зручно. Як я вище писав, просто підключаючи CSS ви такої гнучкості не отримаєте, доведеться лізти в код і шукати що замінити. У SCSS-файлах все винесено в змінні, нічого шукати не потрібно.
Ще ви можете скористатися бібліотеками Міксини, для префіксів CSS3. Я поользуюсь такими бібліотеками як compas і bourbon.
Я раджу вам завантажити SCSS-файли даних framework-ів і просто подивитися їх. Вивчаючи їх структури ви багато чого зрозумієте. Згодом ви будете самі писати SASS-компоненти, такі які вам потрібні. Почати варто з плагінів якими ви часто користуєтеся. І тут потрібно сказати про підключення директиви @import. Змінні і mixin-и повинні бути оголошені раніше, ніж вони викликаються, інакше компілятор викличе помилку, якщо дотримуватися цього правила, то з часом у вас буде свій SCSS-framework, такий який потрібен саме вам, заточений під ваші потреби.