Mixins

_mixins.scss

@import 'vars';

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($element) {
  &--#{$element} {
    @content;
  }
}

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

@mixin min-size($width, $height: $width) {
  min-width: $width;
  min-height: $height;
}

@mixin max-size($width, $height: $width) {
  max-width: $width;
  max-height: $height;
}

@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin border($top: null, $right: null, $bottom: null, $left: null) {
  border-top: $top;
  border-right: $right;
  border-bottom: $bottom;
  border-left: $left;
}

@mixin breakpoint($breakpoint) {
  @media (max-width: map_get($breakpoints, $breakpoint)) {
    @content;
  }
}