Директива @import
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"; @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: unquote("Droid+Sans") @import url("http://fonts.googleapis.com/css?family=#") @import url("http://fonts.googleapis.com/css?family=Droid+Sans"); 1 Правилом является только функционал с возможностями CSS, директива — функционал правила CSS + расширение функционалом Sass.