Sass: директива @import

Один из способов создания DRY-кода заключается в разделении основных задач и сохранении его в отдельных файлах.

Можно использовать директиву CSS import, чтобы включить содержимое одного файла в другой.

Правило CSS @import

Директива @import является правилом CSS, которое какое-то время было очень популярным, прежде чем попало в немилость разработчиков из-за проблем с производительностью.

С помощью @import можно подключать CSS внутри других стилей. При этом подключаемые файлы могут либо располагаться на одном сервере или на другом:

@import "style.css";  
@import "css/style.css";  
@import url("http://domain.com/css/styles.css");

Это позволило импортировать CSS в другие файлы, но данная практика стала редко использоваться из-за снижения производительности. Но Sass устраняет все проблемы, так как операторы @import удаляются из кода Sass при компиляции в CSS.

Директива @import в Sass

Sass расширяет правило CSS @import, чтобы оно работало с файлами .scss и .sass. Он импортирует файл по ссылке. При этом все переменные или примеси, определенные в импортируемом файле, могут быть использованы в основном файле:

@import "typography.scss";

Если в текущем каталоге существует файл typography.scss, его содержимое заменит оператор @import.

Sass import CSS делает все еще проще. Если вы забыли включить расширение, то компилятор будет искать файл с таким же именем и расширением .scss или .sass:

@import "typography";

Приведенный выше код будет искать файл typography.scss или typography.sass в той же папке, где находится файл, в который импортируются стили.

По умолчанию Sass будет включать содержимое импортируемого файла вместо оператора @import. Но бывают случаи, когда Sass компилирует правило @import. Тогда вы получите в файле .css @import вместо кода файла, указанного в правиле. Sass компилирует @import, если:

• Расширение файла — .css;
• Имя файла начинается с HTTP://;;
• Имя файла — URL();
• @import содержит медиа-запросы.

Если вы исключите перечисленные выше условия, в CSS будет импортировано содержимое указанного файла.

Вы не ограничены использованием только одного правила CSS import. Можно использовать столько операторов, сколько захотите. Например, импортируя три различных файла, мы импортируем их содержимое том же порядке, в котором они перечислены:

@import "typography.scss";  
@import "color.scss";  
@import "layout.scss";

Но можно импортировать несколько файлов в одном операторе @import:

@import "typography.scss", "color.scss", "layout.scss";

Все три файла будут импортированы в указанном порядке.

Партиалы

Sass компилирует все файлы .scss или .sass внутри каталога, который он просматривает. Но если нужно импортировать файл, не обязательно компилировать его.

Если добавить в начале имени файла подчеркивание, Sass не будет его компилировать. Если вы не хотите, чтобы файл color.scss компилировался в color.css, то назовите файл _color.scss. В Sass такие файлы называются партиалами.

Можно пропустить подчеркивание при ссылке на файл внутри правила @import. Так же можно пропустить расширение:

@import "color";

Sass import CSS понимает, что нужно импортировать файл _color.scss (или _color.sass) из текущего каталога, если он существует.

Возможность указать, какие файлы компилировать, а какие просто включить в другие файлы, позволяет создать структуру файлов и каталогов, которую проще поддерживать.

Вложенные директивы @import

Также можно вложить @import в другое правило Sass, подобно тому, как вкладываются директивы @media.
Например, вы создаете партиал с именем _nav-bkgd.scss, который содержит только фоновый цвет элементов навигации:

li {  
  background-color: @ccc;  
}

Можно импортировать файл-партиал непосредственно внутри блока кода всех стилей меню навигации. Скажем, внутри класса с именем .global-nav:

.global-nav {  
  @import "nav-bkgd";  
}

Если оба файла находятся в одной папке, будет компилирован следующий код:

.global-nav li {  
  background-color: @ccc;  
}

Нельзя импортировать таким образом все. Например, такие директивы, как @mixin и @charset, размещение которых допускается только на базовом уровне документа, не могут содержаться внутри CSS import.

Структура файлов и папок с помощью @import и партиалов

Существует много различных способов размещения файлов и папок с помощью @import и партиалов, чтобы сделать поддержку проекта проще. Но я расскажу только об одном.

Я использовал эту структуру папок при создании небольшого сайта несколько лет назад. Мой каталог .scssсодержал три папки (modules, partials и vendor), каждая с одним или несколькими файлами. Также у меня был один файл верхнего уровня, main.scss:

В папке vendor содержатся коды, получаемые из сторонних источников. В моем примере есть файл под названием _ico-moon.scss от поставщика Ico Moon.

Папка partials включает в себя код, который будет импортирован в другой файл, а затем скомпилирован с остальной частью кода в этом файле. В папке partials содержатся некоторые общие стили (в файле _base.scss) и стили отдельных элементов навигации (в файле _navigation.scss). Я хочу подключить CSS import, импортировать их и скомпилировать.

Формально файлы во всех трех папках являются партиалами, но partials — имя, назначенное этой папке в структуре. Вы можете изменить имя папки в своем проекте на другое, если это сбивает вас с толку. Главное, что эти файлы содержат код, который будет включен в другой файл, а затем скомпилирован с этим файлом.

Папка modules включает в себя код, который не будет скомпилирован. Она содержит такие компоненты, как примеси, функции и переменные. В моем случае, это два файла _color.scss и _typography.scss. Они содержат переменные и ничего больше.

Я использовал файлы переменных, чтобы быстро показать клиенту имеющиеся варианты дизайна. Вместо одного файла _color.scss, у меня были _color-red.scss, _color-green.scss, _color-blue.scss, в цветовой гамме которых доминировал один конкретный цвет. Так я мог быстро показать цветовые вариации дизайна.

Что касается импорта файлов, за это отвечал файл main.scss. В самом начале файла размещалась серия операторов Sass import CSS:

•	@import “modules/color”;
•	@import “modules/typography”;
•	@import “partials/base”;
•	@import “partials/navigation”;
•	@import “vendor/ico-moon”;

Все файлы технически являются партиалами, поэтому не нужно включать подчеркивание или расширение файла при обращении к нему в операторе.

Мысли напоследок

Правило @import — это одно из правил CSS, которые ранее не рекомендовали использовать. Но все проблемы, связанные с ним, решаются с помощью Sass.

Можно сделать свой код более простым в обслуживании и поддержке, используя CSS import и разбивая большие файлы на более мелкие. Они импортируются в другие файлы, а затем сводятся в одном файле верхнего уровня, который компилируется в CSS.

Перевод статьи «Sass: The @import Directive» был подготовлен дружной командой проекта Сайтостроение от А до Я.