Top 10 Time Saving Sass Mixins

Share

Tweet

by Cameron Alcorn September 23, 2014   Freebies

Sass is amazing, and if you’re not already using mixins, you really should.

Here are 10 time saving Sass (SCSS) mixins to… well… save you time.


1. Media Queries

Typically, media queries end up somewhere near the bottom of a stylesheet, possibly hundreds of lines down from the original style they are meant to alter. With Sass, you can actually nest a media query within a style, creating much more cohesive code.

Sass Mixin

@mixin example-media-query {
  @media only screen and (max-width: 500px) {
    @content;
  }
}

Usage

p {
  font-size:2em;
  @include example-media-query {
    font-size:1em;
  }
}

CSS Output

p {
  font-size:2em;
}
@media only screen and (max-width: 500px) {
  p {
    font-size:1em;
  }
}

2. Animations

Animations are nice, but having to remember and write all those vendor prefixes is obnoxious. There’s a simpler way.

Sass Mixin

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

Usage

div {
  @include animation('animation-example 2s 4');
}

CSS Output

div {
  -webkit-animation: animation-example 2s 4;
  -moz-animation: animation-example 2s 4;
  -ms-animation: animation-example 2s 4;
  -o-animation: animation-example 2s 4;
  animation: animation-example 2s 4;
}

3. Transitions

Again, those vendor prefixes – there are too many.

Sass Mixin

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

Usage

a:hover {
  color: blue;
  @include transition('color 1s ease');
}

CSS Output

a:hover {
  -webkit-animation: color 1s ease;
  -moz-animation: color 1s ease;
  -ms-animation: color 1s ease;
  -o-animation: color 1s ease;
  animation: color 1s ease;
}

4. Transforms

Transforms are a little trickier, but still, simplified. You’ll have to decide which transformations you want to include. Depending on how you use transform mixins, it may make sense for you to create separate mixins for different transformations.

Sass Mixin

@mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y){
  -moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew($skew-x, $skew-y);
  -webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew($skew-x, $skew-y);
  -o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew($skew-x, $skew-y);
  -ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew($skew-x, $skew-y);
  transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew($skew-x, $skew-y);
}

Usage

div {
  @include transform(1, 0deg, 0px, 0px, 0deg, 0deg);
}

CSS Output

div {
  -moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
  -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
  -o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
  -ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
  transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}

5. Keyframes

This is probably the biggest time saver of all. It’s not everyday you write keyframes, but when you do, you’ll be happy you’re not writing out the CSS by hand.

Sass Mixin

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

Usage

@include keyframes(animation-example) {
  from { top: 0px; }
  to { bottom: 0px; }
}

CSS Output

@-webkit-keyframes animation-example {
  from {top: 0px;}
  to {top: 200px;}
}
@-moz-keyframes animation-examplee {
  from {top: 0px;}
  to {top: 200px;}
}
@-ms-keyframes animation-example {
  from {top: 0px;}
  to {top: 200px;}
}
@-o-keyframes animation-example {
  from {top: 0px;}
  to {top: 200px;}
}
@keyframes animation-example {
  from {top: 0px;}
  to {top: 200px;}
}

6. Opacity

Opacity seems straight-forward, until you realize how much the actual syntax has varied in different browsers over the years. This mixin will ensure opacity works in all old versions of Google Chrome, Chromium, Safari, Firefox, and Netscape Navigator, and all versions of Internet Explorer down to IE5 – probably overkill.

Sass Mixin

@mixin opacity($opacity) {
  -moz-opacity: $opacity;
  -khtml-opacity: $opacity;
  opacity: $opacity;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity * 100})";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity * 100});
  filter:alpha(opacity=#{$opacity * 100});
}

Usage

div {
   @include opacity(0.5);
}

CSS Output

div {
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  filter:alpha(opacity=50);
}

7. Border Radius

Again, save yourself some time remembering the prefixes.

Sass Mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

Usage

div {
  @include border-radius(5px);
}

CSS Output

div {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

8. Linear Gradients

This mixin will create 3 different types of gradients, vertical, horizontal, and radial, depending on what values you pass it. Although a bit cumbersome (about 30 lines long), it can save you a lot of time in the long-run. If you’re getting much more complex, I’d recommend using a gradient generator.

Sass Mixin

//Use type "vertical", "horizontal", or "radial"
@mixin gradient($type, $startcolor, $endcolor) {
  @if $type == 'vertical' {
    background: $startcolor; /* Old browsers */
    background: -moz-linear-gradient(top,  $startcolor 0%, $endcolor 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$startcolor), color-stop(100%,$endcolor)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  $startcolor 0%,$endcolor 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  $startcolor 0%,$endcolor 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  $startcolor 0%,$endcolor 100%); /* IE10+ */
    background: linear-gradient(to bottom,  $startcolor 0%,$endcolor 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$startcolor}', endColorstr='#{$endcolor}',GradientType=0 ); /* IE6-9 */
  } @else if $type == 'horizontal' {
    background: $startcolor; /* Old browsers */
    background: -moz-linear-gradient(left, $startcolor 0%, $endcolor 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,$startcolor), color-stop(100%,$endcolor)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, $startcolor 0%,$endcolor 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, $startcolor 0%,$endcolor 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, $startcolor 0%,$endcolor 100%); /* IE10+ */
    background: linear-gradient(to right, $startcolor 0%,$endcolor 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$startcolor}', endColorstr='#{$endcolor}',GradientType=1 ); /* IE6-9 */
  } @else if $type == 'radial' {
    background: $startcolor; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, $startcolor 0%, $endcolor 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$startcolor), color-stop(100%,$endcolor)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, $startcolor 0%,$endcolor 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, $startcolor 0%,$endcolor 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, $startcolor 0%,$endcolor 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, $startcolor 0%,$endcolor 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$startcolor}', endColorstr='#{$endcolor}',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  } @else {
    //you're doing it wrong.
  }
}

Usage

div {
  @include gradient(vertical,#FFFFFF,#000000);
}

CSS Output

div {
  background: #000000; /* Old browsers */
  background: -moz-linear-gradient(top,  #000000 0%, #FFFFFF 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#FFFFFF)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #000000 0%,#FFFFFF 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #000000 0%,#FFFFFF 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #000000 0%,#FFFFFF 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #000000 0%,#FFFFFF 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}

9. Vertical Align

Vertically align an element perfectly in the center of its containing element. Simple enough.

Sass Mixin

@mixin verticalalign {
  &:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%; width: .1px;
  }
}

Usage

div {
  @include verticalalign;
}

CSS Output

div:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%; width: .1px;
}

10. Clearfix

The classic clearfix. Some people have said I should actually use the @extend directive, but the article’s title is “Top 10 Time Saving Sass Mixins”, not “Top 9 Time Saving Sass Mixins & 1 Extend”, so if need be, you can change it to an @extend.

Sass Mixin

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

Usage

div {
  @include clearfix;
}

CSS Output

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

Inspiration for several of the examples above goes to David Tintner and Sebastian Ekstrom.


Did you find this helpful? Follow me on Twitter for more.

  Comments

Written by

Business professional by day, web developer by night, when I’m not creating solutions for my clients, I’m writing or creating meaningful content for the Web.


Posted In
Freebies

Resources & Code Snippets