SCSS-миксины

Module API

Подключайте единый модуль с namespace

@use "okaux/scss/foundation/mixins" as ox;

.project-card {
  padding: ox.spacing-token-var(4);
  @include ox.radius-token(border-radius, lg);
}

Локальный facade может открыть только разрешённую проекту часть API. Это упрощает импорты и не привязывает прикладные файлы к структуре пакета.

@forward "okaux/scss/foundation/mixins/breakpoints";
@forward "okaux/scss/foundation/mixins/colors";
@forward "okaux/scss/foundation/mixins/spacing";
@forward "okaux/scss/foundation/mixins/radius";
@forward "okaux/scss/foundation/mixins/shadow";
@forward "okaux/scss/foundation/mixins/z-index";
@forward "okaux/scss/foundation/mixins/motion";
@forward "okaux/scss/foundation/mixins/pseudo";
@forward "okaux/scss/foundation/mixins/scrollbar";
@forward "okaux/scss/foundation/mixins/themes";

Рекомендуется namespace: @use ".../mixins" as ox. Он показывает происхождение API и защищает проект от совпадений имён.

Responsive

Breakpoint-миксины принимают токен или CSS-размер

• breakpoint($value)Возвращает значение системной медиаточки; число без единицы преобразует в px.
• media-up($name)Правила начиная с breakpoint.
• media-down($name)Правила до breakpoint.
• media-between($from, $to)Закрытый диапазон ширины.
• media-height-up/down/betweenНизкоуровневые диапазоны высоты viewport для редких сценариев.

.project-panel {
  display: block;

  @include ox.media-up(md) {
    display: grid;
    grid-template-columns: 18rem 1fr;
  }

  @include ox.media-between(lg, xxl) {
    gap: ox.spacing-token-var(6);
  }
}

Token helpers

Один контракт работает как функция и как миксин свойства

• Spacingspacing-token-value($value), spacing-token-var($value), spacing-token($property, $value).
• Radiusradius-token-value($value), radius-token-var($value), radius-token($property, $value).
• Shadowshadow-token-value($value), shadow-token-var($value), shadow-token($property, $value).
• Z-indexz-index-token-value($value), z-index-token-var($value), z-index-token($property, $value).
• Layoutlayout-columns($breakpoint) и layout-gutter($breakpoint) читают параметры системной сетки.

.floating-panel {
  gap: ox.spacing-token-var(3);
  @include ox.spacing-token(padding, 6);
  @include ox.radius-token(border-radius, xl);
  @include ox.shadow-token(box-shadow, lg);
  @include ox.z-index-token(z-index, overlay);
}

Spacing и radius также принимают прямое число или CSS-размер, shadow — готовое значение тени, z-index — целое число без единиц. Для системного интерфейса сначала выбирайте именованный токен.

Colors and gradients

Цветовой API различает тему, группу и произвольный stop

• color-token-varcolor-token-var(text-primary) читает theme-роль; color-token-var(primary, brand) — именованную группу. Третий аргумент задаёт alpha.
• color-tokenМиксин принимает CSS-свойство, имя, необязательные группу и alpha.
• gradient-token-stopСоздаёт stop из токена; gradient-stop принимает произвольный CSS-цвет.
• gradient-value / gradientСобирает linear, radial или conic gradient.
• okaux-gradient-value / okaux-gradientБыстрый brand-gradient из системной палитры.

.promo-card {
  @include ox.color-token(color, text-primary);
  border-color: ox.color-token-var(primary, brand, 0.24);
  background: ox.gradient-value(
    linear,
    135deg,
    ox.gradient-token-stop(primary, 0%, brand, 0.18),
    ox.gradient-stop(transparent, 100%)
  );
}

Patterns

Готовые миксины закрывают повторяемое поведение

• motion($prop, $duration, $easing)Объявляет transition; все аргументы имеют значения по умолчанию.
• pseudo-state()Без аргументов создаёт общую группу hover, active, focus, focus-visible и focus-within. Переданные состояния объединяет через ИЛИ; составная строка задаёт сочетание через И.
• theme-styles($theme)Добавляет локальное исключение для light, dark или high-contrast. Вызывается внутри селектора.
• scrollbar(...)Создаёт Firefox и WebKit scrollbar на системных spacing, radius и color-токенах.

.activity-panel {
  overflow: auto;
  @include ox.motion(
    transform,
    var(--ox-motion-duration-slow),
    var(--ox-motion-easing-enter)
  );
  @include ox.scrollbar($size: 2);

  @include ox.pseudo-state() {
    color: inherit;
  }

  @include ox.pseudo-state(hover, focus-visible) {
    border-color: var(--ox-border-default);
  }

  @include ox.theme-styles(high-contrast) {
    border-style: double;
  }
}

.pressable-control {
  @include ox.pseudo-state('hover:active') {
    transform: scale(0.98);
  }
}

Framework extension API

Генераторы предназначены для системных расширений

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

• Layoutemit-flex-columns, emit-flex-offsets, emit-grid-columns, emit-grid-span.
• Utility ruleutility-selector, emit-utility-selector, emit-utility-class-rule, emit-utility-class.
• Utility scaleemit-utility-scale-rules, emit-utility-scale, emit-breakpoint-utility-scale.
• Flex utilityemit-flex-basis-rule, emit-flex-basis-utility.

$inset-scale: (
  0: 0,
  1: var(--ox-space-1),
  2: var(--ox-space-2),
);

@each $suffix, $value in $inset-scale {
  @include ox.emit-utility-class(
    inset,
    $suffix,
    inset,
    $value
  );
}

Перед генерацией: проверьте, нельзя ли расширить существующую token-map. Новый класс должен следовать дефисному контракту OKAUX и проходить utility-проверку.