Sass расширяет CSS правило1 @import, позволяя импортировать scss и sass файлы. Все импортированные scss и sass файлы могут быть объединены в одном результирующем css файле. Кроме того, любые переменные или миксины, объявленные в импортированном файле, могут использоваться в главном файле.

Компилятор ищет другие файлы sass в текущей папке, и в каталоге файлов sass при использовании в Rack, Rails или Merb. Дополнительные каталоги поиска могут задаваться с помощью опции :load_paths или ключ --load-path в командной строке.

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

  • Если расширение файла .css
  • Если имя файла начинается с http://
  • Если имя файла вызывается через url()
  • Если правило @import включает в себя любые медиа-запросы

Если ни одно из вышеперечисленных условий не соблюдено, а расширение файлов .scss или .sass, то эти файлы будут импортированы. Если расширения файлов не указаны, то Sass попытается найти файлы по имени с раширением .scss или .sass и импортирует их.

Например:

@import "foo.scss";

или

@import "foo";

будет импортирован foo.scss, в то время как:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

скомпилируется в

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

Также возможно импортирование нескольких файлов через одну директиву @import. Например:

@import "rounded-corners", "text-shadow";

будут импортированы файлы rounded-corners.scss и text-shadow.scss.

Импортирование может содержать в себе интерполяцию #{}, но только с некоторыми ограничениями. Невозможно динамически импортировать файлы Sass через переменные; интерполяция нужна только для правила @import в CSS. Как таковая, интерполяция работает только с url().

Например:

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

компилируется в

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

1 Правилом является только функционал с возможностями CSS, директива - функционал правила CSS + расширение функционалом Sass.


На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter. Также отправить оповещение об ошибке можно, нажав на эту ссылку.