Вложенный импорт

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

Например, файл example.scss содержит в себе:

.example {
  color: red;
}

далее импортируем и получаем

#main {
  @import "example";
}

#main
  @import example

#main .example {
  color: red;
}

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

Невозможно вкладывать @import в миксин или директиву управления.