Commonly used mixins

_mixins.scss

/**
 * @file
 * Custom theme mixins
 * 
 * These mixins rely on these variables set these in your init or var file
 *
 * $breakpoints: (
 *   lap: 768px, 
 *   desk: 1024px
 * );
 *
 * $base-spacing-unit: 24px;
 * $base-font-size: 16px;
 * $site-width: 1200px;
 */

/**
 * Media Query
 *
 * Coincides with the breakpoint map in the base/_vars file,
 * can also pass in a number for random min-width media query.
 * To use, simply include in your stylesheets.
 *
 * @example
 *  @include mq(lap) { styles.... }
 */
@mixin mq($bp) {
  @if type-of($bp) == number {
    @media screen and (min-width: $bp) {
      @content;
    }
  } @else {
    $size: map-get($breakpoints, $bp);

    @media all and (min-width: $size) {
      @content;
    }
  }
}

/**
 * Font Size
 *
 * Pass in a font size and convert to REM unit.
 */
@mixin font-size($size: $base-font-size) {
  font-size: $size;
  font-size: $size/$base-font-size * 1rem;
}

/**
 * Hover
 *
 * Apply hover & focus at same time.
 * @param
 *  - active: whether to also use active class
 */
@mixin hover($active: false) {
  @if($active == true) {
    &:hover,
    &:focus,
    &.active {
      @content;
    }
  } @else {
    &:hover,
    &:focus {
      @content;
    }
  }
}


/**
 * Vertical Rhythm
 *
 * We define this as a mixin so we avoid using @extends on 
 * unrelated elements.
 */
@mixin vr($size: $base-spacing-unit) {
  @if $size == $base-spacing-unit {
    margin-bottom: $base-spacing-unit;
  } @else {
    margin-bottom: $size * $base-spacing-unit;
  }
}

/**
 * Clearfix
 */
@mixin clearfix() {
  &:after,
  &:before {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
} 

/**
 * Visually Hidden
 *
 * Invisible from screen but visible to screen readers
 */
@mixin visuallyhidden() {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  position: absolute !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
}

/**
 * Placeholder Text
 */
@mixin placeholder() {
  ::-webkit-input-placeholder {
    @content;
  }

  :-moz-placeholder { /* Firefox 18- */
    @content;
  }

  ::-moz-placeholder {  /* Firefox 19+ */
    @content;
  }

  :-ms-input-placeholder {  
    @content;
  }
}

/**
 * Cover
 */
@mixin cover($width: 100%, $height: 100%) {
  position: absolute;
  top: 0;
  left: 0;
  width: $width;
  height: 100%;
}