Импорт файлов

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

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

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

Для примера создадим файл _reset.scss и в нём пропишем следующий код.

html, body, div, h1, h2, h3, p, pre,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
}

Теперь для добавления этого кода в наш основной стилевой файл достаточно написать.

@import "reset";

И в конечном CSS-файле вместо @import будет добавлено содержимое _reset.scss.

На импорте файлов построены библиотеки примесей типа Bourbon. Достаточно импортировать библиотеку и можно в свой код добавлять огромное количество уже готовых штук. Вот, например, как сделать линейный градиент.

@import "bourbon/bourbon";
body {
 @include linear-gradient(#1e5799, #2989d8); 
}

В CSS мы получим готовый градиент с уже добавленными вендорными префиксами.

body {
  background-color: #1e5799;
  background-image: -webkit-linear-gradient(#1e5799, #2989d8);
  background-image: linear-gradient(#1e5799, #2989d8);
}