@import

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

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// style.scss
@import 'foundation/code', 'foundation/lists';

// SASS
// foundation/_code.sass
code
  padding: .25em
  line-height: 0

// SASS
// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0

// SASS
// style.sass
@import foundation/code, foundation/lists

/* CSS */
code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Когда Sass импортирует файл, этот файл вычисляется так, как если бы его содержимое находилось непосредственно на месте @import. Все миксины, функции и переменные из импортированного файла становятся доступными, а весь его CSS включается точно в то место, где было записано @import. Более того, в импортированной таблице стилей доступны все миксины, функции и переменные, определённые до @import (в том числе из других @importов).

Поиск файла

Вряд ли вам понравится указывать абсолютные URL-адреса для каждой импортируемой таблицы стилей, поэтому алгоритм Sass для поиска импортируемых файлов немного упрощает эту задачу. Прежде всего, не нужно явно указывать расширение импортируемого файла: @import "variables" автоматически загрузит variables.scss, variables.sass или variables.css.

Пути загрузки

Все реализации Sass позволяют задавать пути загрузки — пути в файловой системе, по которым Sass будет искать файлы при разрешении импортов. Например, если передать node_modules/susy/sass в качестве пути загрузки, можно использовать @import "susy" для загрузки node_modules/susy/sass/susy.scss.

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

Частичные файлы

По соглашению файлы Sass, предназначенные только для импорта, а не для самостоятельной компиляции, начинаются с _ (например, _code.scss). Такие файлы называются частичными; это указывает инструментам Sass, что их не следует компилировать самостоятельно. При импорте частичного файла можно опустить _.

Индексные файлы

Совместимость:

Dart Sass

✓

LibSass

начиная с 3.6.0

Ruby Sass

начиная с 3.6.0

Если в папке создать _index.scss или _index.sass, при импорте самой папки вместо неё будет загружен этот файл.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// foundation/_index.scss
@import 'code', 'lists';

// style.scss
@import 'foundation';

// SASS
// foundation/_code.sass
code
  padding: .25em
  line-height: 0

// SASS
// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0

// SASS
// foundation/_index.sass
@import code, lists

// SASS
// style.sass
@import foundation

/* CSS */
code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Пользовательские импортёры

Все реализации Sass позволяют определять пользовательские импортёры, управляющие тем, как @importы находят таблицы стилей:

• Node Sass и Dart Sass на npm предоставляют параметр importer в своём JS API.

• Dart Sass на pub предоставляет абстрактный класс Importer, который можно расширить для создания пользовательского импортёра.

• Ruby Sass предоставляет абстрактный класс Importers::Base, который можно расширить для создания пользовательского импортёра.

Вложенность

Импорты обычно размещают в начале таблицы стилей, но это не обязательно. Их также можно вкладывать в правила стилей или обычные at-правила CSS. Импортированный CSS вкладывается в этот контекст, поэтому вложенные импорты удобны для ограничения фрагмента CSS определённым элементом или медиавыражением. Миксины, функции и переменные верхнего уровня, определённые во вложенном импорте, доступны только в этом вложенном контексте.

// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

// style.scss
.theme-sample {
  @import "theme";
}

// SASS
// _theme.sass
pre, code
  font-family: 'Source Code Pro', Helvetica, Arial
  border-radius: 4px

// SASS
// style.sass
.theme-sample
  @import theme

/* CSS */
.theme-sample pre, .theme-sample code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}

// _theme.scss
ul li {
  $padding: 16px;
  padding-left: $padding;
  [dir=rtl] & {
    padding: {
      left: 0;
      right: $padding;
    }
  }
}

// style.scss
.theme-sample {
  @import "theme";
}

// SASS
// _theme.sass
ul li
  $padding: 16px
  padding-left: $padding
  [dir=rtl] &
    padding:
      left: 0
      right: $padding

// SASS
// style.sass
.theme-sample
  @import theme

/* CSS */
.theme-sample ul li {
  padding-left: 16px;
}
[dir=rtl] .theme-sample ul li {
  padding-left: 0;
  padding-right: 16px;
}

Импорт CSS

Совместимость:

Dart Sass

начиная с 1.11.0

LibSass

частично

Ruby Sass

✗

➤

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

// code.css
code {
  padding: .25em;
  line-height: 0;
}

// style.scss
@import 'code';

// SASS
// code.css
code {
  padding: .25em;
  line-height: 0;
}

// SASS
// style.sass
@import code

/* CSS */
code {
  padding: .25em;
  line-height: 0;
}

Файлы CSS, импортированные Sass, не поддерживают специальные возможности Sass. Чтобы авторы случайно не написали Sass в своём CSS, все возможности Sass, не являющиеся допустимым CSS, приведут к ошибкам. В остальном CSS будет выведен без изменений. Его даже можно расширять!

Обычные @import-импорты CSS

Совместимость:

Dart Sass

✓

LibSass

частично

Ruby Sass

✓

➤

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

• Импорты, URL которых заканчивается на .css.
• Импорты, URL которых начинается с http:// или https://.
• Импорты, URL которых записан как url().
• Импорты с медиавыражениями.

@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

// SASS
@import "theme.css"
@import "http://fonts.googleapis.com/css?family=Droid+Sans"
@import url(theme)
@import "landscape" screen and (orientation: landscape)

/* CSS */
@import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

Интерполяция

Хотя в импортах Sass нельзя использовать интерполяцию (чтобы всегда можно было определить, откуда берутся миксины, функции и переменные), в обычных импортах CSS она допустима. Это позволяет динамически создавать импорты, например на основе параметров миксина.

@mixin google-font($family) {
  @import url("http://fonts.googleapis.com/css?family=#{$family}");
}

@include google-font("Droid Sans");

// SASS
@mixin google-font($family)
  @import url("http://fonts.googleapis.com/css?family=#{$family}")


@include google-font("Droid Sans")

/* CSS */
@import url("http://fonts.googleapis.com/css?family=Droid Sans");

Импорт и модули

Совместимость:

Dart Sass

начиная с 1.23.0

LibSass

✗

Ruby Sass

✗

➤

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

Импорт файла системы модулей

При импорте файла, содержащего правила @use, импортирующий файл получает доступ ко всем элементам, определённым непосредственно в этом файле (в том числе к приватным), но не к элементам модулей, загруженных этим файлом. Однако если файл содержит правила @forward, импортирующий файл получит доступ к перенаправленным элементам. Это позволяет импортировать библиотеку, написанную для использования с системой модулей.

Файлы только для импорта

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

Чтобы упростить переход, Sass также поддерживает файлы только для импорта. Если назвать файл <name>.import.scss, он будет загружаться только при импорте, но не при @useах. Таким образом, можно сохранить совместимость для пользователей @import и при этом предоставить удобный API пользователям новой системы модулей.

// _reset.scss

// Module system users write `@include reset.list()`.
@mixin list() {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

// _reset.import.scss

// Legacy import users can keep writing `@include reset-list()`.
@forward "reset" as reset-*;

// SASS
// _reset.sass

// Module system users write `@include reset.list()`.
@mixin list()
  ul
    margin: 0
    padding: 0
    list-style: none

// SASS
// _reset.import.sass

// Legacy import users can keep writing `@include reset-list()`.
@forward "reset" as reset-*

Настройка модулей через импорты

Совместимость:

Dart Sass

начиная с 1.24.0

LibSass

✗

Ruby Sass

✗

Можно настроить модули, загружаемые через @import, определив глобальные переменные до @import, впервые загружающего этот модуль.

// _library.scss
$color: blue !default;

a {
  color: $color;
}

// _library.import.scss
@forward 'library' as lib-*;

// style.sass
$lib-color: green;
@import "library";

// SASS
$color: blue !default

a
  color: $color

// SASS
// _library.import.sass
@forward 'library' as lib-*

// SASS
// style.sass
$lib-color: green
@import "library"

/* CSS */
a {
  color: green;
}

Загрузка модуля, содержащего импорты

Когда вы используете @use (или @forward), чтобы загрузить модуль, использующий @import, этот модуль будет содержать все публичные элементы, определённые в загружаемой таблице стилей, а также всё, что эта таблица стилей импортирует транзитивно. Иными словами, все импортируемые файлы рассматриваются так, словно они записаны в одной большой таблице стилей.

Это позволяет легко начать использовать @use в таблице стилей, даже если библиотеки, от которых вы зависите, ещё не перешли на новую систему модулей. Но имейте в виду: после перехода их API вполне могут измениться!

Отличия от @use

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

• @use делает переменные, функции и миксины доступными только в области видимости текущего файла. Оно никогда не добавляет их в глобальную область видимости. Благодаря этому легко определить, откуда берётся каждое имя, используемое в файле Sass, и можно использовать более короткие имена без риска конфликтов.

• @use загружает каждый файл только один раз. Это предотвращает случайное многократное дублирование CSS из зависимостей.

• @use должно располагаться в начале файла и не может быть вложено в правила стилей. Вложенные импорты можно заменить вызовами миксинов или meta.load-css().

• Каждое правило @use может содержать только один URL.

• В @use URL необходимо заключать в кавычки, даже при использовании синтаксиса с отступами.