SASS Mixins

_mixins.scss

/// Mixin to prefix several properties at once
/// @author Hugo Giraudel
/// @param {Map} $declarations - Declarations to prefix
/// @param {List} $prefixes (()) - List of prefixes to print
@mixin prefix($declarations, $prefixes: (webkit moz ms o)) {
  @each $property, $value in $declarations {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }

    // Output standard non-prefixed declaration
    #{$property}: #{$value};
  }
}

// Vertical alignment of element within its parent
// -----------------------------------------------
@mixin universal-valign-wrapper($width: 100%, $height: null) {
  display: table;
  width: $width;

  @if ($height) {
    height: $height;
  }

  table-layout: fixed;
}

@mixin universal-valign-content($vert-align: middle) {
  display: table-cell;
  vertical-align: $vert-align;
}

// Materialize-like Media Query Mixins
// -----------------------------------
$small-screen:  600px !default;
$medium-screen: 992px !default;
$large-screen:  1200px !default;

@mixin small-and-down {
  @media only screen and (max-width: #{$small-screen}) {
    @content;
  }
}

@mixin medium-and-down {
  @media only screen and (max-width: #{$medium-screen}) {
    @content;
  }
}

@mixin medium-only {
  @media only screen and (min-width: #{$small-screen + 1px}) and (max-width: #{$medium-screen}) {
    @content;
  }
}

@mixin medium-and-up {
  @media only screen and (min-width: #{$small-screen + 1px}) {
    @content;
  }
}

@mixin large-and-up {
  @media only screen and (min-width: #{$medium-screen + 1px}) {
    @content;
  }
}