Директива @import языка SASS
Директива @import есть и в обычном CSS, она служит для импорта одной таблицы стилей (или нескольких) в другую. Язык SASS расширяет данную директиву, хотя грамотнее сказать компилятор SASS расширяет данную директиву.
В обычном CSS, директива @import должна находиться в самом начале CSS-файла, перед ней не должно быть никаких стилей, иначе браузеры могут ее проигнорировать. На заре web-a данная директива помогала разработчикам разбивать большие таблицы стилей на более мелкие, тем самым они структурировали проект. Представьте, что у вас крупный интернет-магазин. Вам нужно сделать множество правок к какому-нибудь празднику (новый год, 8 марта, 23 февраля и тд), или к какому-нибудь мероприятию (черная пятница, день рождения интернет-магазина, или любая другая акция) и у вас одна большая CSS-ка строчек так на 8 - 10 тысяч. Такие правки займут много времени. Если же CSS структурирован, то понятно, что в "header.css" находятся стили шапки документа, а не стили корзины или каталога. В файле "basket.css" лежат стили для корзины, общих стилей для сайта там быть не может. Это удобно. Единственный минус, так это лишние запросы на сервер, соответственно производительность вашего сайта просядет.
Поскольку SASS относится к препроцессорным языкам, то в директиву @import были добавлены новые возможности. Раз компилятор все равно из SCSS-файла компилирует CSS-ку, то он вполне сможет через директиву @import напрямую включить стили наших SCSS-файлов. Если правильно настроить компилятор, то можно на выходе получить один CSS-файл. Таким образом SCSS-файлы будут структурированы, у нас будут "header.scss", "basket.scss" и тд, а на выходе мы получим один CSS-файл. Некоторые разработчики называют данный процесс фрагментированием, или разбиением на блоки. Раз все равно происходит включение SCSS-файлов, то директиву @import не обязательно подключать только в начале файла, ее можно подключить в любом месте. Итак начнем:
@import "header.scss";
После компиляции мы получим файл "main.css" со стилями из файла "header.scss". Для подключения SCSS-файла не обязательно указываеть его расширение. Например:
@import "header";
После компиляции мы получим как и в прошлый раз файл "main.css" со стилями из файла "header.scss". Поскольку мы пользуемся компилятором, то мы может отойти от стандартных правил CSS и подключать файлы следующим образом:
@import "header", "basket", "catalog";
После компиляции мы получим файл main.css со стилями из файла "header.scss", "basket.scss", "catalog.scss".
Включения SCSS-файла через директиву @import не произойдет (@import будет выведен по правилам CSS) если:
- мы подключаем файл с расширением CSS;
- путь к подключаемому файлу начинается с http://;
- мы подключаем файл через url();
- если директива @import подключается для каких-то устройств, те вызывается с медиазапросами (это напрямую говорит компилятору не включать файл, а сгенерить @import по правилам CSS).
@import "basket.css";
@import "http://sass.com/header";
@import url(footer);
@import "print" screen;
@import "basket.css";
@import "http://sass.com/header";
@import url(footer);
@import "print" screen;
Директива @import может сочетаться с вложенными правилами. Давайте рассмотрим следующие примеры:
&-date {
font-size: 12px;
}
&-header {
font-size: 24px;
}
.row {
margin: 30px 10px;
}
.sidebar {
@import 'example.scss';
}
.sidebar-date {
font-size: 12px;
}
.sidebar-header {
font-size: 24px;
}
.sidebar .row {
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 переменных, меняя их вы сможете настроить пагинацию так как вам удобно.
$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, такой какой нужен именно вам, заточенный под ваши нужды.