PostCSS mixin example

mixins.scss

/* type.css */

@import 'vars.css';

@define-mixin header {
  font-family: $font-sans;
  font-weight: 600;
  letter-spacing: -0.01em;
}

@define-mixin header-one {
  @mixin header;
  
  font-size: 1.475rem;
  line-height: 1.3;
}

/* component style.css */

@import 'vars.css';
@import 'type.css';

.firstName {
  @mixin header-one;
  
  margin-bottom: 1rem;
  color: $off-black;
}