@import

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

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

⚠️ Внимание!

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

Что не так с `@import`?

Правило @import имеет ряд серьезных проблем:

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

Новая модульная система и правило @use решают все эти проблемы.

Как мне мигрировать?

Мы написали инструмент миграции который автоматически преобразует большую часть кода на основе @import в код на основе @use в мгновение ока. Просто наведите его на свои точки входа и позвольте ему работать!

SCSS
Sass
CSS
SCSS Syntax// 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 Syntax// foundation/_code.sass
code
  padding: .25em
  line-height: 0

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

  & &
    padding:
      bottom: 0
      left: 0



// style.sass
@import foundation/code, foundation/lists
CSS Outputcode {
  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), доступны в импортированной таблице стилей.

⚠️ Внимание!

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

Поиск файла permalinkПоиск файла

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

⚠️ Внимание!

Чтобы таблицы стилей работали в каждой операционной системе, Sass импортирует файлы по URL, а не по пути к файлу. Это означает, что вам нужно использовать косую черту, а не обратную косую черту, даже если вы работаете в Windows.

Загрузка путей permalinkЗагрузка путей

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

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

💡 Интересный факт:

В отличие от некоторых других языков, Sass не требует, чтобы вы использовали ./ для относительного импорта. Относительный импорт всегда доступен.

Частичные permalinkЧастичные

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

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

Dart Sass: ✓
LibSass: since 3.6.0
Ruby Sass: since 3.6.0

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

SCSS
Sass
CSS
SCSS Syntax// 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 Syntax// foundation/_code.sass
code
  padding: .25em
  line-height: 0

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

  & &
    padding:
      bottom: 0
      left: 0



// foundation/_index.sass
@import code, lists
// style.sass
@import foundation
CSS Outputcode {
  padding: .25em;
  line-height: 0;
}

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

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

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

Node Sass и Dart Sass on npm предоставляют параметр importer как часть своего JS API.
Dart Sass on pub предоставляет абстрактный класс Importer, который может быть расширен пользовательским импортером.
Ruby Sass предоставляет абстрактный класс Importers::Base, который может быть расширен пользовательским импортером.

Вложенность permalinkВложенность

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

SCSS
Sass
CSS
SCSS Syntax// _theme.scss
pre, code {
  font-family: 'Source Code Pro', Helvetica, Arial;
  border-radius: 4px;
}
// style.scss
.theme-sample {
  @import "theme";
}
Sass Syntax// _theme.sass
pre, code
  font-family: 'Source Code Pro', Helvetica, Arial
  border-radius: 4px

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

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

💡 Интересный факт:

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

⚠️ Внимание!

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

SCSS
Sass
CSS
SCSS Syntax// _theme.scss
ul li {
  $padding: 16px;
  padding-left: $padding;
  [dir=rtl] & {
    padding: {
      left: 0;
      right: $padding;
    }
  }
}
// style.scss
.theme-sample {
  @import "theme";
}
Sass Syntax// _theme.sass
ul li
  $padding: 16px
  padding-left: $padding
  [dir=rtl] &
    padding:
      left: 0
      right: $padding



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

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

Импорт CSS permalinkИмпорт CSS

Dart Sass: since 1.11.0
LibSass: partial
Ruby Sass: ✗

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

SCSS
Sass
CSS
SCSS Syntax// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.scss
@import 'code';
Sass Syntax// code.css
code {
  padding: .25em;
  line-height: 0;
}
// style.sass
@import code
CSS Outputcode {
  padding: .25em;
  line-height: 0;
}

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

Простой CSS @import permalinkПростой CSS `@import`

Dart Sass: ✓
LibSass: partial
Ruby Sass: ✓

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

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

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

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

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

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

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


@include google-font("Droid Sans")
CSS Output@import url("http://fonts.googleapis.com/css?family=Droid Sans");

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

Dart Sass: since 1.23.0
LibSass: ✗
Ruby Sass: ✗

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

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

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

⚠️ Внимание!

Когда импортируется файл с правилами @use, весь CSS, транзитивно загруженный ими, включается в результирующую таблицу стилей, даже если он уже был включен другим импортом. Если вы не будете осторожны, это может привести к раздуванию вывода CSS!

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

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

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

SCSS
Sass
SCSS Syntax// _reset.scss

// Пользователи системы модулей пишут `@include reset.list()`.
@mixin list() {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
// _reset.import.scss

// Устаревшие пользователи импорта могут продолжать писать `@include reset-list()`.
@forward "reset" as reset-*;
Sass Syntax// _reset.sass

// Пользователи системы модулей пишут `@include reset.list()`.
@mixin list()
  ul
    margin: 0
    padding: 0
    list-style: none


// _reset.import.sass

// Устаревшие пользователи импорта могут продолжать писать `@include reset-list()`.
@forward "reset" as reset-*

Настройка модулей с помощью импорта permalinkНастройка модулей с помощью импорта

Dart Sass: since 1.24.0
LibSass: ✗
Ruby Sass: ✗

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

SCSS
Sass
CSS
SCSS Syntax// _library.scss
$color: blue !default;

a {
  color: $color;
}
// _library.import.scss
@forward 'library' as lib-*;
// style.sass
$lib-color: green;
@import "library";
Sass Syntax$color: blue !default

a
  color: $color


// _library.import.sass
@forward 'library' as lib-*
// style.sass
$lib-color: green
@import "library"
CSS Outputa {
  color: green;
}

⚠️ Внимание!

Модули загружаются только один раз, поэтому, если вы измените конфигурацию после того, как вы @import модуля в первый раз (даже косвенно), изменение будет проигнорировано, если вы @import модуль снова.

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

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

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

@import

⚠️ Внимание!

Что не так с @import?

Как мне мигрировать?

SCSS Syntax

⚠️ Внимание!

Поиск файла permalinkПоиск файла

⚠️ Внимание!

Загрузка путей permalinkЗагрузка путей

💡 Интересный факт:

Частичные permalinkЧастичные

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

SCSS Syntax

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

Вложенность permalinkВложенность

SCSS Syntax

💡 Интересный факт:

⚠️ Внимание!

SCSS Syntax

Импорт CSS permalinkИмпорт CSS

SCSS Syntax

Простой CSS @import permalinkПростой CSS @import

SCSS Syntax

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

SCSS Syntax

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

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

⚠️ Внимание!

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

SCSS Syntax

Настройка модулей с помощью импорта permalinkНастройка модулей с помощью импорта

SCSS Syntax

⚠️ Внимание!

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

Что не так с `@import`?

Простой CSS @import permalinkПростой CSS `@import`