Complete technical reference for SCSS variables, mixins, and functions
Comprehensive set of SCSS variables for customization
// Color scales (1-10) $primary-6: #7c3aed; // Base $red-6: #ef4444; $green-6: #22c55e; $blue-6: #3b82f6; $gray-6: #6b7280; // Spacing $spacer: 0.25rem; $spacing-4: 1rem; // Typography $font-family-base: sans-serif; $font-size-base: 1rem;
Media query mixins for responsive design
@include media-breakpoint-up(md) {
// Styles for medium and up
}Accessible focus styles
@include focus-ring();
@include focus-ring-primary();Generate custom utility classes
@include generate-utility($utility);Access and manipulate colors
color('primary', 6);
tint($primary, 20%);
shade($primary, 20%);Calculate spacing values
space(4); // 1rem
space(8); // 2remGet breakpoint values
breakpoint-min('md');
breakpoint-max('lg');Runtime color customization
:root {
--atomix-primary: #7c3aed;
--atomix-success: #22c55e;
--atomix-error: #ef4444;
}Dynamic theme changes
// JavaScript
document.documentElement
.setAttribute('data-theme', 'dark');Combining SCSS and CSS custom properties:
// SCSS
.c-button {
--btn-bg: #{$primary-6};
background: var(--btn-bg);
@include media-breakpoint-up(md) {
padding: space(6);
}
}