A17 SCSS Utilities

Description

Mixin to add a responsive type set to an element. This mixin is used in the auto generated Typography CSS classes.

SCSS Usage

@include typeset(typestyle)

Where typestyle is one of your defined responsive typestyle names.

And so, in SCSS:

_component.scss

.foo {
  @include typeset(h1);
}

Output

app.css

.foo {
  font-family: var(--sans);
  font-weight: 500;
  --bold-weight: 500;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.foo b,
.foo strong {
  font-weight: var(--bold-weight);
}
.foo i,
.foo em {
  font-style: italic;
}
@media screen and (min-width: 650px) {
  .foo {
    font-size: 2.25rem;
  }
}
@media screen and (min-width: 990px) {
  .foo {
    font-size: 3rem;
  }
}