Pre-defined values for consistent design including font stacks, CSS timing functions, modular scale ratios, and form element selectors. These variables provide a foundation for consistent styling across projects.
Cross-platform font stacks optimized for different design contexts and operating systems.
// Sans-serif font stacks
$font-stack-helvetica: ("Helvetica Neue", "Helvetica", "Arial", sans-serif);
$font-stack-lucida-grande: ("Lucida Grande", "Lucida Sans Unicode", "Geneva", "Verdana", sans-serif);
$font-stack-verdana: ("Verdana", "Geneva", sans-serif);
$font-stack-system: (system-ui, -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif);
// Serif font stacks
$font-stack-garamond: ("Garamond", "Baskerville", "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif);
$font-stack-georgia: ("Georgia", "Times", "Times New Roman", serif);
$font-stack-hoefler-text: ("Hoefler Text", "Baskerville Old Face", "Garamond", "Times New Roman", serif);
// Monospace font stacks
$font-stack-consolas: ("Consolas", "monaco", monospace);
$font-stack-courier-new: ("Courier New", "Courier", "Lucida Sans Typewriter", "Lucida Typewriter", monospace);
$font-stack-monaco: ("Monaco", "Consolas", "Lucida Console", monospace);Usage Examples:
// Body text with system fonts
body {
font-family: $font-stack-system;
}
// Headings with serif font
h1, h2, h3 {
font-family: $font-stack-georgia;
}
// Code blocks
pre, code {
font-family: $font-stack-consolas;
}
// Print-friendly serif
@media print {
body {
font-family: $font-stack-garamond;
}
}Mathematical ratios for creating harmonious typography and spacing scales.
// Musical ratios
$minor-second: 1.067;
$major-second: 1.125;
$minor-third: 1.2;
$major-third: 1.25;
$perfect-fourth: 1.333;
$augmented-fourth: 1.414;
$perfect-fifth: 1.5;
$minor-sixth: 1.6;
$major-sixth: 1.667;
$minor-seventh: 1.778;
$major-seventh: 1.875;
$octave: 2;
$major-tenth: 2.5;
$major-eleventh: 2.667;
$major-twelfth: 3;
$double-octave: 4;
// Special ratio
$golden: 1.618; // Golden ratioUsage Examples:
// Typography scale
$base-font-size: 1rem;
h1 { font-size: $base-font-size * $major-third * $major-third; } // 1.5625rem
h2 { font-size: $base-font-size * $major-third; } // 1.25rem
p { font-size: $base-font-size; } // 1rem
small { font-size: $base-font-size / $major-third; } // 0.8rem
// Spacing scale
$space-xs: 0.25rem;
$space-sm: $space-xs * $perfect-fourth; // 0.333rem
$space-md: $space-sm * $perfect-fourth; // 0.444rem
$space-lg: $space-md * $perfect-fourth; // 0.592rem
// With modular-scale function
.heading {
font-size: modular-scale(2, 1rem, $golden);
margin-bottom: modular-scale(1, 0.5rem, $perfect-fifth);
}Predefined easing functions for smooth animations and transitions.
// Ease-in functions (slow start, accelerating)
$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
// Ease-out functions (fast start, decelerating)
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
$ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
// Ease-in-out functions (slow start and end)
$ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);Usage Examples:
// Button hover effects
.button {
transition: all 0.3s $ease-out-cubic;
&:hover {
transform: translateY(-2px);
}
}
// Modal animations
.modal {
transform: scale(0.8);
opacity: 0;
transition: all 0.4s $ease-out-back;
&.open {
transform: scale(1);
opacity: 1;
}
}
// Loading animations
.loading-spinner {
animation: spin 1s $ease-in-out-cubic infinite;
}
// Page transitions
.page-transition {
transition: opacity 0.5s $ease-in-out-quart;
}Comprehensive lists of form input selectors with pseudo-class variants. Important: These variables must be interpolated with #{} when used as selectors.
// Text input selectors
$all-text-inputs: (
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="email"]',
'input[type="month"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="time"]',
'input[type="url"]',
'input[type="week"]',
'input:not([type])',
'textarea'
);
// Text inputs with pseudo-class states
$all-text-inputs-active: (/* same list with :active */);
$all-text-inputs-focus: (/* same list with :focus */);
$all-text-inputs-hover: (/* same list with :hover */);
$all-text-inputs-invalid: (/* same list with :invalid */);
// Button selectors
$all-buttons: (
'button',
'input[type="button"]',
'input[type="reset"]',
'input[type="submit"]'
);
// Button pseudo-class variants
$all-buttons-active: (/* same list with :active */);
$all-buttons-focus: (/* same list with :focus */);
$all-buttons-hover: (/* same list with :hover */);Usage Examples:
// Style all text inputs
#{$all-text-inputs} {
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.5rem;
font-family: inherit;
}
// Focus styles for text inputs
#{$all-text-inputs-focus} {
border-color: #007acc;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
}
// Hover styles for text inputs
#{$all-text-inputs-hover} {
border-color: #666;
}
// Invalid input styles
#{$all-text-inputs-invalid} {
border-color: #dc3545;
}
// Button styles
#{$all-buttons} {
background: #007acc;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
#{$all-buttons-hover} {
background: shade(#007acc, 10%);
}
#{$all-buttons-active} {
background: shade(#007acc, 20%);
}$font-stack-system - Modern system font stack// Create a font hierarchy
$font-primary: $font-stack-system; // Body text
$font-secondary: $font-stack-georgia; // Headings
$font-mono: $font-stack-consolas; // Code
body { font-family: $font-primary; }
h1, h2, h3 { font-family: $font-secondary; }
pre, code { font-family: $font-mono; }// Define animation speeds and easings
$duration-fast: 0.15s;
$duration-normal: 0.3s;
$duration-slow: 0.5s;
$easing-standard: $ease-out-cubic;
$easing-bounce: $ease-out-back;
// Use consistently across components
.button {
transition: all $duration-normal $easing-standard;
}// Create semantic scale names
$scale-ratio: $major-third;
$scale-base: 1rem;
$text-xs: $scale-base / ($scale-ratio * $scale-ratio);
$text-sm: $scale-base / $scale-ratio;
$text-base: $scale-base;
$text-lg: $scale-base * $scale-ratio;
$text-xl: $scale-base * $scale-ratio * $scale-ratio;