Sass Mixins

_mixins.scss

// `@include @clearfix()` will add a clearfix to the CSS
@mixin clearfix {
  &:after {
    display: table;
    clear: both;
    content: '';
  }
}

// `@include font-size(18)` will add both a 18rem font size and a 18px fallback
@mixin font-size($sizeValue: 18) {
  font-size: stripUnits($sizeValue) + px;
  font-size: calcRem($sizeValue);
}

// `@include respond-under(1200px)` will affect screens 1200px wide and under
@mixin respond-under($res) {
  @media screen and (max-width: $res) {
    @content;
  }
}

// `@include respond-over(1200px)` will affect screens 1200px wide and over
@mixin respond-over($res) {
  @media screen and (min-width: $res) {
    @content;
  }
}

// `@include visited()` will affect all links and visited links
@mixin visited() {
  &,
  &:visited {
    @content;
  }
}

// `@include hover()` will affect all hovered, focused, and active links
@mixin hover($active: false) {
  @if ($active == 'all') {
    &,
    &:hover,
    &:active,
    &:focus,
    &:focus-within {
      @content;
    }
  }
  @else if ($active) {
    &:hover,
    &:active,
    &:focus,
    &:focus-within {
      @content;
    }
  }
  @else {
    &:hover,
    &:focus,
    &:focus-within {
      @content;
    }
  }
}

// `@include css-var('color','color-body', red)` will add a css variable call to --mv-trellis-color-body, with a fallback color
@mixin css-var($property, $css-var, $default) {
  #{$property}: $default;
  #{$property}: var(--mv-trellis-#{$css-var}, $default);
}

// `@include transition(color background-color)` will add the full transition value for both color and background-color
@mixin transition($properties, $duration: $transition-duration, $timing: $transition-timing) {
  $transition: null;
  @each $property in $properties {
    $transition: append($transition, $property $duration $timing, comma);
  }

  transition: $transition;
}

// `@include aspect-ratio()` force an apect ration on absolutely positioned child elements
@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    width: 100%;
    padding-top: ($height / $width) * 100%;
    content: '';
  }
}

@mixin screen-reader( $show-focus: false ) {
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  // Many screen reader and browser combinations announce broken words as they would appear visually.
  word-wrap: normal !important;

  clip-path: inset(50%);
  @if ( $show-focus ) {
    &:focus {
      // Above WP toolbar.
      display: block;
      clip: auto !important;
      z-index: 1000000;
      top: ($gutter / 4);
      left: ($gutter / 4);
      width: auto;
      height: auto;
      padding: 15px 23px 14px;
      color: #444;
      background-color: #eee;
      font-size: 1em;
      line-height: normal;
      text-decoration: none;

      clip-path: none;
    }
  }
}