Useful Sass mixins

Utils.scss

// 1. BEM Mixin
@mixin e($name) {
  @at-root &__#{$name} {
    @content;
  }
}

//modifiers get appended with "--" and the $name
@mixin m($name) {
  @at-root &--#{$name} {
    @content;
  }
}

// 2. Size
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// 3. Positions
@mixin position($position, $args) {
  @each $o in top right bottom left {
    $i: index($args, $o);
    @if $i
    and $i + 1 <= length($args)
    and type-of( nth($args, $i + 1) ) == number {
      #{$o}: nth($args, $i + 1);
    }
  }
  position: $position;
}

@mixin absolute($args) {
  @include position(absolute, $args);
}

// 4. Triangle
@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
  @if not index(top right bottom left, $direction) {
    @warn "Direction must be one of top, right, bottom or left.";
  }

  @else {
    @include absolute($position); // Position
    @include size(0); // Size
    content: '';
    z-index: 2;

    // This require compass
     border-#{opposite-position($direction)}: $size * 1.5 solid $color;
    $perpendicular-borders: $size solid transparent;

    @if $direction == top or $direction == bottom {
      border-left:   $perpendicular-borders;
      border-right:  $perpendicular-borders;
    }

    @else if $direction == right or $direction == left {
      border-bottom: $perpendicular-borders;
      border-top:    $perpendicular-borders;
    }
  }
}

// 5. Import mixin
$modules: () !default;
@mixin exports($name) {
  @if (not index($modules, $name)) {
    $modules: append($modules, $name) !global;
    @content;
  }
}

// 6. Element offset
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@mixin element-invisible-off {
  position: static !important;
  height: auto;
  width: auto;
  overflow: visible;
  clip: auto;
}

// 7. Hover Active Focus state mixin
@mixin hover-active-focus($property, $value) {
    &:hover, &:active, &:focus {
        #{$property}: $value;
    }
}

// 8. Retina mixin
@mixin imgRetina($image, $extension, $width, $height) {
  background: url($image + '.' + $extension) no-repeat;
  width: $width;
  height: $height;
  
  @media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {     
      background-image: url($image + '-2x' + '.' + $extension) no-repeat;
      background-size: $width $height;
    }
}