8 Sass mixins you must have in your toolbox (via Z63: http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/)

8-sass-mixins.md

8 Sass mixins you must have in your toolbox

Via Z63: http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/

Animations & Keyframes

Usage:

@include keyframes(slide-down) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}

.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s 3');
}

SVG background images with PNG and retina fallback

Usage:

body {
  @include background-image('pattern');
}

Breakpoints

Usage:

.sidebar {
  width: 60%
  float: left;
  margin: 0 2% 0 0;
  @include bp-small {
    width: 100%;
    float: none;
    margin: 0;
  }
}

Set a rem font size with pixel fallback

Usage:

p {
  @include font-size(14px)
}

Clearfix

Usage:

.container-with-floated-children {
  @extend %clearfix;
}

Cross browser opacity

Usage:

.faded-text {
  @include opacity(0.8);
}

Transitions

Usage:

a {
  color: gray;
  @include transition(color .3s ease);
  &:hover {
    color: black;
  }
}

Visually hide an element

Usage:

.visually-hidden {
  @extend %visuallyhidden;
}

_animations-keyframes.scss

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }  
  @-ms-keyframes $animation-name {
    @content;
  }
  @-o-keyframes $animation-name {
    @content;
  }  
  @keyframes $animation-name {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}

_background-image.scss

$image-path: '../img' !default;
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';

@mixin background-image($name, $size:false) {
  background-image: url(#{$image-path}/#{$name}.svg);
  @if($size) {
    background-size: $size;
  }
  .no-svg & {
    background-image: url(#{$image-path}/#{$name}.#{$fallback-extension});
    
    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
      background-image: url(#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension});
    }
  }
}

_breakpoints.scss

@mixin bp-large {
  @media only screen and (max-width: 60em) {
    @content;
  }
}

@mixin bp-medium {
  @media only screen and (max-width: 40em) {
    @content;
  }
}

@mixin bp-small {
  @media only screen and (max-width: 30em) {
    @content;
  }
}

_calculate-rem.scss

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

_clearfix.ext.scss

%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

_opacity.scss

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

_transitions.scss

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

_visually-hidden.ext.scss

%visuallyhidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute;
}