Useful Sass mixins

Why Sass? Sass boasts more features and abilities than any other CSS extension language out there and mixins are one of the most powerful features of Sass. Sass mixins are blocks of code that you define once and can then re-use anywhere, they are super useful when you want really clean and efficient code.

In this post I collected some nifty mixins that should help speed up your development process.

• Vendor Prefixing

@mixin prefix($property, $value, $vendors: webkit moz ms o) {
  @if $vendors {
    @each $vendor in $vendors {
      #{"-" + $vendor + "-" + $property}: #{$value};
     }
   }
  #{$property}: #{$value};
}

Usage: @include prefix(transform, rotate(42deg), webkit ms);

Thanks Hugo for this mixin!

• Rem font size with pixel fallback

@function calculateRem($size) {
  $remSize: $size / 14px;
  @return $remSize * 1rem;
}
@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

Usage: @include font-size(18px);

• Black and white opacity

@function black($opacity){
    @return rgba(0,0,0,$opacity)
}
@function white($opacity){
    @return rgba(255,255,255,$opacity)
}

Usage: background:black(0.25);

Thanks Sacha for this mixin!

• Image replacement and hiding text

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Usage: @include hide-text;

• Animations and and keyframes

@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};
}

Usage: @include animation('slide-left 5s 3');

• Transitions

@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -ms-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}

Usage: @include transition(all, 0.2s, ease-in-out);

• Opacity in all major browsers

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

Usage: @include opacity(0.8);

Thanks Jake for this mixin!

• Breakpoints

@mixin breakpoint($point) {
      @if $point == large {
      @media (min-width: 64.375em) { @content; }
}
      @else if $point == medium {
      @media (min-width: 50em) { @content; }
}
      @else if $point == small {
      @media (min-width: 37.5em) { @content; }
 }
}

Usage: @include breakpoint(large) { width: 60%; }

Thanks Jake for this mixin!

• Clearfix

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

Usage: @include clearfix();

Thanks Nicolas for this mixin!

• Box Sizing

@mixin box-sizing($box-model) {
  -webkit-box-sizing: $box-model; // Safari <= 5
     -moz-box-sizing: $box-model; // Firefox <= 19
          box-sizing: $box-model;
}

Usage: @include box-sizing(border-box);

Thanks Jake for this mixin!

• Border Radius

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;  
}
@mixin border-top-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  border-top-right-radius: $radius;
   -webkit-border-top-left-radius: $radius;
   border-top-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
     -webkit-border-top-right-radius: $radius;
     border-top-right-radius: $radius;
     background-clip: padding-box;
}
@mixin border-bottom-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  border-bottom-right-radius: $radius;
   -webkit-border-bottom-left-radius: $radius;
   border-bottom-left-radius: $radius;
   background-clip: padding-box;
}
@mixin border-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  border-bottom-left-radius: $radius;
     -webkit-border-top-left-radius: $radius;
     border-top-left-radius: $radius;
     background-clip: padding-box;
}

Usage: @include border-radius(15px);

Thanks Jake for this mixin!

• Retina Images

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

Usage: @include image-2x("logo2x.png", 100px, 25px);

Thanks Jason for this mixin!