SCSS Variables and Nesting Explained

SCSS Variables

Variables store reusable values like colors, fonts, and sizes. Change one place, update everywhere.

$primary: #2563eb;
$font-stack: 'Inter', sans-serif;
$radius: 8px;

.btn {
  background: $primary;
  font-family: $font-stack;
  border-radius: $radius;
}

Maps for Grouped Values

$colors: (
  "primary": #2563eb,
  "danger": #dc2626,
);
.alert { color: map-get($colors, "danger"); }

Nesting

.nav {
  background: #fff;
  ul { display: flex; }
  li { margin: 0 10px; }
  a {
    color: #333;
    &:hover { color: $primary; }  /* & = parent */
  }
}

The Parent Selector &

.btn {
  &--large { font-size: 20px; }  /* compiles to .btn--large */
  &.active { font-weight: bold; }
}

Don't Over-Nest

Limit nesting to 3 levels — deep nesting creates bloated, overly-specific CSS.

FAQs

CSS variables vs SCSS variables?

SCSS vars are compile-time; CSS custom properties (--x) are runtime and changeable with JS. More in our SCSS section.

What does & do?

It references the parent selector for states and modifiers.