Reduce Motion Query.scss

// This function pairs with the `motion` mixin
// to convert a `true` or `false` value to the
// appropriate media query value for reduce motion.
@function motion($value) {
  @if $value {
    @return 'no-preference';
  }
  @else {
    @return 'reduce';
  }
}

@mixin motion($value: true) {
  @media (prefers-reduced-motion: motion($value)) {
    @content;
  }
}