Директива @import

Sass расширяет CSS правило¹ @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";

@import foo.sass

// или

@import foo

будет импортирован файл foo, в то время как:

@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 "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

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

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

@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}");

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

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

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