SCSS @import Directive

Директива @import в SCSS используется для включения содержимого одного SCSS файла в другой. Это позволяет разбивать ваш CSS на более мелкие, управляемые файлы и затем объединять их в один скомпилированный CSS файл.

Базовое использование

Простейший способ использования @import - указать путь к файлу, который вы хотите импортировать. По умолчанию SCSS предполагает, что импортируемый файл является другим SCSS файлом (.scss или .sass).

Синтаксис:

@import "path/to/file";

Пример:

Предположим, у вас есть файл _variables.scss (обратите внимание на символ _ в начале имени файла - это соглашение об именовании для partials, которые не должны компилироваться в отдельный CSS файл):

// _variables.scss
$primary-color: blue;
$font-size: 16px;

И вы хотите использовать эти переменные в вашем основном файле style.scss:

// style.scss
@import "variables"; // SCSS автоматически ищет файлы с расширениями .scss или .sass

body {
  color: $primary-color;
  font-size: $font-size;
}

При компиляции style.scss содержимое _variables.scss будет включено в результирующий style.css.

Partial Imports

Часто вы будете создавать SCSS файлы, содержащие только фрагменты стилей (например, переменные, mixins, functions), которые не должны компилироваться в отдельные CSS файлы. По соглашению, такие файлы начинаются с символа подчеркивания _ (например, _variables.scss, _mixins.scss).

При использовании @import вам не нужно указывать подчеркивание и расширение файла для partials. SCSS автоматически найдет файл.

Пример:

@import "variables"; // Импортирует _variables.scss
@import "mixins";    // Импортирует _mixins.scss

CSS Imports

Если вы хотите импортировать обычный CSS файл (.css), SCSS обработает это как обычный CSS @import и оставит его как есть в скомпилированном CSS файле. Это полезно для включения сторонних библиотек или CSS файлов, которые вы не хотите компилировать через SCSS.

Синтаксис:

@import "path/to/style.css";

Пример:

@import "normalize.css"; // В результирующем CSS останется @import "normalize.css";

Медиа-запросы в Imports

Вы можете применять медиа-запросы к импортированным стилям. Импортированные стили будут включены только при выполнении указанного медиа-условия.

Синтаксис:

@import "path/to/file" screen and (min-width: 768px);

Пример:

@import "mobile-styles" (max-width: 767px);
@import "desktop-styles" screen and (min-width: 768px);

Указание нескольких файлов для импорта

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

Синтаксис:

@import "variables", "mixins", "theme";

Правила @import

• Все директивы @import должны располагаться в начале SCSS файла, перед любыми правилами стилей.
• SCSS будет искать импортируемые файлы в текущем каталоге и в путях, указанных в настройках компилятора (load paths).

Преимущества использования @import

• Организация кода: Разбиение стилей на логические файлы делает код более структурированным и легким в поддержке.
• Переиспользование кода: Переменные, mixins и functions могут быть определены в одном файле и импортированы во многие другие.
• Улучшение читаемости: Меньшие файлы легче читать и понимать.

Недостатки (по сравнению с @use и @forward в современных версиях SCSS)

В более новых версиях SCSS (начиная с версии 1.3.0) рекомендуется использовать директивы @use и @forward вместо @import. @import имеет некоторые недостатки:

• Глобальная область видимости: Переменные, mixins и functions, импортированные с помощью @import, становятся доступны глобально во всем файле, что может привести к конфликтам имен.
• Отсутствие контроля над импортируемым: Вы импортируете все содержимое файла, даже если вам нужна только часть.
• Повторный импорт: Один и тот же файл может быть импортирован несколько раз, что может привести к раздуванию CSS.

Несмотря на эти недостатки, @import все еще поддерживается и широко используется в существующих проектах. Однако для новых проектов рекомендуется изучить и использовать @use и @forward для лучшей организации и производительности.

Заключение

Директива @import является фундаментальным инструментом в SCSS для организации и включения стилей из других файлов. Понимание ее работы и правил поможет вам создавать более структурированные и поддерживаемые CSS проекты. Однако помните о преимуществах @use и @forward в современных версиях SCSS.