Настройка Berry CSS через Sass

В Berry CSS каждый модуль настраивается индивидуально.

В каталоге каждого модуля присутствуют файлы _default.scss, где хранятся переменные по умолчанию.

Например padding-отступы (модуль utilities) объявлены так:

$padding_list: 0, 3, 5, 6, 7, 8, 9, 10, 15, 20, 25, 30, 40, 50, 60, 70, 100 !default;

Для того, чтобы переопределить эту переменную, следует использовать конфигурационный файл config/_utilities.scss в секции @use with:

@use '../modules/utilities/default' with (
	$padding_list: (0, 10, 20, 30, 40, 50),
);

Следует соблюдать правильный синтаксис Sass для работы с директивой @use. В частности списки переменной нужно дополнительно обернуть скобками.

Таким образом в своём проекте достаточно определить только те настройки, которые не совпадают с дефолтными.

Избранное подключение sass-файлов

В модулях typography и utilities можно указать из каких они будут состоять классов. Для этого используется переменная $modules (в каждом модуле своя), где можно отметить только те файлы, которые будут использоваться для итоговой генерации css-файла.

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