The alphabet a-z as a Sass variable. Useful for things like assigning areas to grid based layouts.

@each $letter in $alphabet {
  .grid-area-#{$letter} {
    grid-area: #{$letter};
  }
}

A generic variable for headings. Defaults to h1 h2 h3 h4 h5 h6.

@each $heading in $headings {
  #{$heading} {
    color: rebeccapurple;
  }
}

Used when converting declarative pixel units to relative em units. Defaults to 16.

$px-per-rem: 18;

Useful for setting high z-index values.

.sticky.navigation {
  z-index: $topMost - 42;
}