My favorite mixins

_mixins.scss

$breakpoints: (
    "phone":        400px,
    "phone-wide":   480px,
    "phablet":      560px,
    "tablet-small": 640px,
    "tablet":       768px,
    "tablet-wide":  991px,
    "desktop":      1200px,
    "desktop-wide": 1440px
);

// auto align

@mixin autoAlign {
    margin: {
        left: auto;
        right: auto;
    }
}

// placeholder styling

@mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

// Vendor Prefix
@mixin vendor-prefix($name, $value) {
  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
    #{$vendor}#{$name}: #{$value};
  }
}

// media query mixin

@mixin mq($width, $type: max) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == min {
            $width: $width + 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

// Hover change state breakpoint to prevent double tap on phones
@mixin hover() {
    @media screen and (min-width: 769px) { &:hover { @content } ; }
}

// z-index tracking

@function z($name) {
    @if index($z-indexes, $name) {
        @return (length($z-indexes) - index($z-indexes, $name)) + 1;
    } @else {
        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
        @return null;
    }
}
$z-indexes: (
    "outdated-browser",
    "modal",
    "site-header",
    "page-wrapper",
    "site-footer"
);

// Clearfix. Use by extending the rules to any class you want to appy it to.
%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

//funky link
%funkyLink {
  position: relative;
  padding-bottom: 3px;

  &:after {
    content: "";
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #d9a129;
    visibility: hidden;
    @include vendor-prefix(transition, (all ease .3s));
    @include vendor-prefix(transform, (scaleX(0)));
  }

  &:hover {
    &:after {
      visibility: visible;
      @include vendor-prefix(transform, (scaleX(1)));
    }
  }
}

%funkyLinkBefore {
  position: relative;
  padding-bottom: 3px;

  &:before {
    content: "";
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #d9a129;
    visibility: hidden;
    @include vendor-prefix(transition, (all ease .3s));
    @include vendor-prefix(transform, (scaleX(0)));
  }

  &:hover {
    &:before {
      visibility: visible;
      @include vendor-prefix(transform, (scaleX(1)));
    }
  }
}