scss-conventions

name

scss-conventions

description

SCSS coding conventions for OUDS Web. Use this skill whenever writing, editing, or reviewing SCSS files. Covers variable naming ($component-state-property-size formula), required !default flag, mandatory mixins (border-radius, transition), forbidden patterns (hardcoded values, raw tokens, lighten/darken, border:none), color-mode mixin usage, and OUDS mod markers. Invoke this skill for any SCSS work — even small edits can violate token or mixin rules.

SCSS Conventions

Why these rules exist

OUDS Web uses token-driven multi-brand theming. Strict SCSS conventions ensure that token variables resolve correctly across 3 brands, dark mode works via CSS custom properties, RTL is handled by rtlcss, and Stylelint catches violations in CI.

---

Variable naming

Formula: $component-state-property-size

$nav-link-disabled-color
$modal-content-box-shadow-xs
$btn-padding-y

Every module-scope variable requires !default (allows consumer overrides). Local variables in mixins/functions are exempt.

---

Token usage

Always use semantic or component tokens. Never use raw tokens or hardcoded values.

// ✓ semantic token
padding: $ouds-space-padding-block-medium;

// ✓ component token (preferred when exists)
@include border-radius($ouds-button-border-radius-default);

// ✓ CSS custom property for colors (dark mode)
color: var(--#{$prefix}--default);


: ;


: ;