Utilities

Purpose

The utilities/ directory contains Sass tools — variables and mixins — that produce no CSS output on their own. They must be @use'd in other files to take effect.

Think of this directory as your project's design tokens and shared logic. Every other directory imports from here.

_variables.sass

Centralizes all design tokens: colors, spacing scale, typography, shadows. Changing a value here propagates across the entire project.

// Breakpoints
$mobile:  640px
$tablet:  768px
$desktop: 1024px

// Colors
$color-bg:   #0F172A
$color-text: #F8FAFC

// Spacing
$spacing-sm: 0.5rem
$spacing-md: 1rem
$spacing-lg: 2rem

_mixins.sass

Reusable Sass mixins for patterns you repeat across components and views. Keep them generic — no mixin should be tied to a specific component.

@use 'variables' as *

=mobile
  @media (max-width: $tablet - 1px)
    @content

=tablet
  @media (min-width: $tablet)
    @content

=desktop
  @media (min-width: $desktop)
    @content

Usage

Import utilities at the top of any file that needs them:

@use '../utilities' as *

.navbar
  background: $color-bg
  padding: $spacing-md

  +mobile
    padding: $spacing-sm