Variables, Nesting, Mixins & Extends

Variables & Nesting

$primary-color: #3498db;
$spacing-unit: 8px;
$border-radius: 4px !default;  // !default — only applies if not already set,
                                // lets a theme override it before importing this file

.card {
  padding: $spacing-unit * 2;
  border-radius: $border-radius;

  .title {                 // compiles to .card .title { ... }
    font-weight: bold;
  }

  &:hover {                // & references the parent selector
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &.is-active {             // .card.is-active
    border-color: $primary-color;
  }
}

Mixins

@mixin flex-center($direction: row) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: $direction;
}

.hero {
  @include flex-center(column);
}

// Mixins COPY their declarations into every call site — good for styles
// that vary per usage; can bloat output if included many times unchanged.

Extend & Placeholders

// Placeholder — never output alone, only when something @extends it
%button-base {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  @extend %button-base;   // MERGES selectors — shared styles appear once in output
  background: $primary-color;
}

.btn-secondary {
  @extend %button-base;
  background: gray;
}

// Prefer mixins over @extend across media query boundaries — extending a
// selector defined outside a media query from inside one can produce
// surprising results in where the merged rule actually lands.