Variables

Code

$brand-color: #1976d2;
$spacing: 8px;
$radius: 4px;
$breakpoints: (
  small: 576px,
  medium: 768px,
  large: 992px
);

.button {
  background: $brand-color;
  padding: $spacing * 2;
  border-radius: $radius;
}

@mixin respond-to($name) {
  @media (min-width: map-get($breakpoints, $name)) {
    @content;
  }
}

.grid {
  @include respond-to(medium) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Explanation

Sass variables (prefixed with $) store reusable values like colors, spacing, and breakpoints. They can hold scalars, lists, and maps, which map-get reads by key. Variables promote consistency and let a theme change with a single edit.

More Sass Snippets