Sass Mixin Collection

mixins.scss

/**
 * Note: Several of these mixins (especially the first few) assume you are using
 * the Flat UI color variables and $flat-ui-colors from the flat-ui-colors gist
 *   >  https://gist.github.com/rex/61964b6d2060059c6a5c
 */
 
// Generate a border for an item with a random color. Useful for debugging CSS layouts.
@mixin random-border() {
  // Pick a random number from 1-20, since we have 20 flat-ui colors
  $key: random(20);
  // Find the color at the random index
  $color: nth($flat-ui-colors, $key);
  // Set the border!
  border: 1px $color solid;  
}

// Generates a 'two-tone' background, essentially half one color and half another, without gradients or fading.
@mixin two-tone-button($start, $stop) {
  background: $start;
  background: -moz-linear-gradient(top, $start 0%, $start 50%, $stop 50%, $stop 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(50%,$start), color-stop(50%,$stop), color-stop(100%,$stop));
  background: -webkit-linear-gradient(top, $start 0%,$start 50%,$stop 50%,$stop 100%);
  background: -o-linear-gradient(top, $start 0%,$start 50%,$stop 50%,$stop 100%);
  background: -ms-linear-gradient(top, $start 0%,$start 50%,$stop 50%,$stop 100%);
  background: linear-gradient(to bottom, $start 0%,$start 50%,$stop 50%,$stop 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$stop',GradientType=0 );
}

// Animation transitions [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

// Animation keyframes [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
@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;
  }
}

// Animation definitions [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}

// REM Calculation, to be used in conjunction with font-size() below [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

// Build font-sizes based on root font-size [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

// Pre-defined responsive breakpoints [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
@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;
  }
}

// SVG background images with PNG fallback (supporting retina displays) [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
$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});
        }
    }
}

// Cross-browser opacity [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

// Amazing clearfix mixin [Found on http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/]
%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

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