Модули SASS

В этой статье объясняются модули SASS.

Мы объясняем, как организовать модули SASS с помощью @use и @forward, а также как повторно использовать переменные, миксины, функции, настройки темы и публичные API.

YouTube Video

Модули SASS

Система модулей SASS помогает чётко определить область видимости стилей и обеспечивает удобный для повторного использования и поддержки дизайн.

Основные концепции модулей

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

Пример структуры файлов

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

 1styles/
 2├─ _variables.scss
 3├─ _mixins.scss
 4├─ _functions.scss
 5├─ components/
 6│  ├─ _button.scss
 7│  └─ _card.scss
 8├─ utilities/
 9│  └─ _helpers.scss
10└─ main.scss

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

Основы @use

@use загружает модуль и предоставляет пространство имён. Это предотвращает конфликт имён и уточняет, из какого модуля происходит элемент.

1// _variables.scss
2$primary-color: #0a74da;
3$padding-base: 12px;

• Этот файл простой и определяет только переменные. Переменным, опубликованным из модуля, можно обращаться напрямую с помощью @use.

1// main.scss
2@use 'variables';
3
4.example {
5  color: variables.$primary-color;
6  padding: variables.$padding-base;
7}

• Здесь модуль variables используется с пространством имён variables.. Такой подход делает происхождение каждого элемента очевидным.

Сокращение или создание псевдонимов для пространств имён

Использование as позволяет сократить пространство имён.

1@use 'variables' as vars;
2
3.btn {
4  color: vars.$primary-color;
5}

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

Определение миксина

Миксины и функции также можно определять и использовать внутри модулей. Соблюдение единого стиля комментариев согласно конвенциям проекта способствует ясности.

1// _mixins.scss
2// Create a simple responsive container mixin
3@mixin container($max-width: 1200px) {
4  width: 100%;
5  margin-left: auto;
6  margin-right: auto;
7  max-width: $max-width;
8}

• В этом файле определён миксин для контейнеров. Он принимает аргументы и предоставляет значения по умолчанию.

1// main.scss
2@use 'mixins' as m;
3
4.wrapper {
5  @include m.container(1000px);
6}

• Вот пример использования миксина с помощью @include.

Определение функций

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

1// _functions.scss
2@use 'sass:math';
3
4// Create a simple px-to-rem converter function
5@function to-rem($px, $base: 16) {
6  @return math.div($px, $base) * 1rem;
7}

• Этот файл определяет функцию, которая преобразует значения пикселей в rem. Также указано значение базы по умолчанию.

1// main.scss
2@use 'functions' as f;
3
4.title {
5  font-size: f.to-rem(24);
6}

• Вот пример вызова функции с помощью @use и применения результата к стилю.

Экспорт модулей и @forward (дизайн API)

Если вы хотите сделать несколько внутренних файлов доступными извне, используйте @forward для создания 'публичного API'.

1// _index.scss (module entry)
2@forward 'variables';
3@forward 'mixins';
4@forward 'functions';

• Несколько внутренних файлов могут быть объединены в единую точку входа, предоставляющую публичный API. Это позволяет пользователям получать доступ ко всем необходимым функциям, импортируя только одну точку входа.

1// main.scss
2@use 'index' as ds; // ds = design system
3
4.button {
5  color: ds.$primary-color;
6  @include ds.container();
7}

• Содержимое variables и mixins доступно через модуль index. @forward делает index публичным слоем.

Управление API с помощью опций show и hide в @forward

Если нужно опубликовать только определённые переменные, используйте опции show или hide.

1// _variables.scss
2$internal-thing: 10px !default; // for internal use
3$primary-color: #0a74da !default;
4$secondary-color: #f5f5f5 !default;

• Добавление !default позволяет опубликовать значение, которое можно будет переопределить.

1// _index.scss
2@forward 'variables' show $primary-color, $secondary-color;
3@forward 'mixins';

• Используя show с @forward, вы можете ограничить доступный API только нужными элементами. Переменные и функции, используемые внутри, не будут видны извне.

Деление модулей настраиваемыми (с помощью with)

Если в модуле используются значения с !default, их можно переопределить с помощью параметра with при импорте.

1// _theme.scss
2$brand-color: #ff6600 !default;
3$radius: 4px !default;
4
5@mixin button-style() {
6  background-color: $brand-color;
7  border-radius: $radius;
8}

• Модуль со значениями по умолчанию, определёнными через !default, может принимать конфигурацию с помощью with.

1// main.scss
2@use 'theme' with (
3  $brand-color: #2288ff,
4  $radius: 8px
5);
6
7.my-btn {
8  @include theme.button-style();
9}

• Параметр with в @use позволяет переопределять переменные по умолчанию при импорте модуля. Это полезно для переключения тем.
• Обратите внимание, что with действует только во время импорта и позже значения изменить нельзя.

Практический пример: компонент кнопки (полный пример)

Давайте попробуем создать стили для кнопок с помощью модулей. Сначала разделите переменные и миксины по отдельным модулям.

1// _variables.scss
2$btn-padding-y: 8px !default;
3$btn-padding-x: 16px !default;
4$btn-font-size: 14px !default;
5$btn-primary-bg: #0a74da !default;
6$btn-primary-color: #fff !default;

• Здесь определены переменные по умолчанию для кнопок. Использование !default позволяет пользователям переопределять эти значения.

 1// _mixins.scss
 2@use "variables" as v;
 3
 4@mixin btn-base() {
 5  display: inline-flex;
 6  align-items: center;
 7  justify-content: center;
 8  padding: v.$btn-padding-y v.$btn-padding-x;
 9  font-size: v.$btn-font-size;
10  border: none;
11  cursor: pointer;
12}

• Здесь определён базовый миксин для кнопок. Они разделены для удобства повторного использования.

 1// _button.scss
 2@use 'variables' as v;
 3@use 'mixins' as m;
 4
 5.button {
 6  @include m.btn-base();
 7  background: v.$btn-primary-bg;
 8  color: v.$btn-primary-color;
 9  border-radius: 4px;
10  transition: opacity 0.15s ease;
11  &:hover { opacity: 0.9; }
12}
13
14.button--large {
15  padding: calc(v.$btn-padding-y * 1.5) calc(v.$btn-padding-x * 1.5);
16  font-size: v.$btn-font-size * 1.25;
17}

• Стили для кнопок создаются с использованием пространств имён через @use. Вариант определён как .button--large.

1// main.scss
2@use 'button'; // or @use 'index' that forwards button, variables, mixins

• Импортируя модуль button, вы сразу можете использовать стили кнопки.

Переключение тем (использование нескольких файлов тем)

Смену темы можно выполнить с помощью конфигурации через with или создавать отдельные модули и менять используемый модуль через @use.

1// themes/_light.scss
2$brand-color: #0a74da !default;

1// themes/_dark.scss
2$brand-color: #111827 !default;

• Определите фирменные цвета и другие настройки в разных файлах тем и переключайте их при сборке или импорте.

1// main.scss (light theme)
2@use 'theme' with ($brand-color: #0a74da);
3@use 'button';

• Выберите тему, используя либо параметр with, либо импортируя, например, @use 'themes/light' во время сборки.

Приватное и публичное (префикс _ и !default)

В SASS добавление подчеркивания в начале имени файла помечает его как частичный (partial). Однако для управления видимостью экспорта модулей используйте show и hide с @forward, чтобы контролировать, что экспортируется.

С помощью @forward можно организовать публичный API и скрыть внутренние реализации от внешнего использования.

Лучшие практики для реального использования

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

• Если переменные могут изменяться в составе темы, добавляйте !default. Это облегчает пользователям переопределение значений.
• Модули должны быть разделены по зонам ответственности и сосредоточены на одной задаче. Управлять становится проще за счёт разделения переменных, миксинов и компонентов.
• Управляйте публичными экспортами через @forward и используйте show или hide при необходимости. Определение того, что будет публичным, способствует более безопасному проектированию.
• Используйте пространства имён, чтобы было понятно, к какому модулю принадлежит каждая функция. Это предотвращает путаницу с другим кодом.
• Помните, что with работает только при использовании @use. Поскольку изменить их позже нельзя, задавайте конфигурацию сразу при импорте.
• Используйте подчёркивание в начале имени файла, чтобы сделать его частичным, и он не компилировался отдельно. Это упрощает объединение файлов в более крупную структуру.
• Включение примеров использования в модуль index помогает при тестировании и документации. Пользователям становится проще понимать поведение системы.

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

Резюме

Система модулей SASS организует код стилей с помощью пространств имён, публичных API и упрощённой конфигурации. Грамотное использование @use и @forward значительно упрощает командную разработку, смену тем и проектирование библиотек.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video