2.1 each-heading

Applies Sass content to one or more heading elements.

Parameters

$headings optional, headings to iterate over

* {
  @include each-heading(h2 h3) {
     color: rebeccapurple;
  }
}

2.1 grid-areas

Iterates over areas applying a grid-area to each.

Parameters

$areas optional, defaults to $alphabet

.my.spectacular.grid.layout {
  @include grid-areas(a b c d);
}

Example

A

B

C

D

<style type="text/css">
.my.spectacular.grid.layout {
  --outline: 1px solid rebeccapurple;
  grid-template-areas:
  "a a a a"
  "b c c d";
}
</style>
<div class="my spectacular grid centered layout" style="max-width: 12ch">
  <div class="outlined grid-area-a">
    A
  </div>
  <div class="outlined grid-area-b">
    B
  </div>
  <div class="outlined grid-area-c">
    C
  </div>
  <div class="outlined grid-area-d">
    D
  </div>
</div>

2.2 high-contrast

Applies a -ms-high-contrast to Sass content.

body {
  @include high-contrast(black-on-white) {
     --background: white;
     --color: black;
  }
}

2.3 luminosity

Applies a luminosity media query to Sass content.

body {
  @include luminosity(dim) {
     background: black;
  }
}

2.3 pointer

Applies a pointer media query to Sass content.

body {
  @include pointer(coarse) {
     font-size: 120%;
  }
}

2.4 reduce-motion

Applies a -reduce-motion media query to Sass content.

* {
  @include reduce-motion() {
     transition-duration: 0 !important;
  }
}

Spectacular