Разделение одного большого документа на множество маленьких упрощает разработку, потому что код становится проще и нагляднее, его легче отлаживать. Для загрузки одного файла из другого в 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);
}