@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 класс, который может быть расширен пользовательским импортером.

Вложенность

Импорты обычно пишутся на верхнем уровне таблицы стилей, но они не обязательно должны быть. Они также могут быть вложены внутри правил стилей или простых правил 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, так как оно используется для обозначения простого плавного CSS @import.

// 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;
}

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

Простые импорты CSS @import

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

Dart Sass

✓

LibSass

частично

Ruby Sass

✓

➤

Поскольку @import также определено в CSS, Sass необходимо иметь способ компиляции простого CSS @import без попыток импортировать файлы во время компиляции. Для этого и для того, чтобы 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 могут измениться!