Частичные файлы и структура

Когда сайт растёт, единственный main.scss разрастается до тысяч строк. Sass позволяет разбить стили на много маленьких файлов и всё равно получить один CSS-файл. Файлы, которые существуют только для подключения в другой файл, называются частичными (partials); их имена начинаются с подчёркивания: _buttons.scss.

Создание частичного файла

Создайте styles/_buttons.scss со стилями кнопок:

// styles/_buttons.scss
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
}

Подчёркивание сообщает Sass: не компилируй этот файл отдельно. Если скомпилировать всю папку командой sass styles:css, файл _buttons.css не появится.

Подключение частичного файла

Главный файл подключает частичные файлы правилом @use. Подчёркивание и расширение .scss не пишутся:

// styles/_cards.scss
.card {
  padding: 16px;
  border: 1px solid #ddd;
}

// styles/main.scss
@use "buttons";
@use "cards";

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
}
 
.card {
  padding: 16px;
  border: 1px solid #ddd;
}

CSS каждого частичного файла попадает в main.css в порядке строк @use. Страница по-прежнему подключает один файл — css/main.css.

Папки

Частичные файлы группируют по папкам по назначению. Известный шаблон 7-1 предлагает семь папок и один главный файл. Для небольшого сайта хватит четырёх:

styles/
├── abstracts/        ← переменные, миксины, функции: CSS не выводят
│   ├── _variables.scss
│   └── _mixins.scss
├── base/             ← сброс, типографика, стили тегов
│   └── _base.scss
├── components/       ← кнопки, карточки, формы
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/           ← шапка, подвал, сетка
│   └── _header.scss
└── main.scss         ← только строки @use

Полный шаблон 7-1 добавляет pages/ (стили отдельных страниц), themes/ и vendors/ (сторонний CSS). Добавляйте их, когда они действительно понадобятся.

Путь к файлу в папке

Путь в @use отсчитывается от текущего файла. main.scss подключает компоненты так:

// styles/components/_buttons.scss
.btn {
  padding: 8px 16px;
}

// styles/base/_base.scss
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

// styles/main.scss
@use "base/base";
@use "components/buttons";

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}
 
.btn {
  padding: 8px 16px;
}

Порядок важен: сначала базовые стили, затем компоненты, чтобы компоненты могли переопределить базу.

Частая ошибка

Файл без подчёркивания — не частичный. Если назвать его buttons.scss и скомпилировать папку командой sass styles:css, Sass создаст лишний css/buttons.css рядом с main.css, и одни и те же правила окажутся в двух файлах. Начинайте имя каждого частичного файла с _.