Фрагментация в SASS - это разделение кода на несколько файлов, которые можно будет переиспользовать в других участках кода.

Их еще называют partials.

Данные из этих файлов в дальнейшем легко переиспользуются через импорт.

На практике это позволяет упростить поддержку кода, уменьшает дублирование и делает стили модульными.

Для создания файла с фрагментом кода или по другому partials, название файла именуют с нижнего подчеркивания _, например: _menu, _header или _buttons.

Такие названия файлов указывают компилятору SASS что код из них должен быть импортирован.

Для импорта кода в основной файл, например в app.sass используем директиву @import

/* app.sass */
@import '_menu';
@import '_header';
@import '_buttons';

Нужно обрать внимание, что при импорте файлов не нужно указывать расширение.

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

styles/
├── _menu.scss
├── _buttons.scss
├── _header.scss
└── main.scss

В современно подходе нужно использовать @use вместо @import. Такая деректива добавилась в SASS с обновлением Dart Sass чтобы убрать конфликты которые вызывал @import

/* main.scss */
@use 'menu';
@use 'buttons';
@use 'header';