Helpful SASS Mixins

Sass is the most popular and well supported CSS preprocessor. At its basics Sass allows you to write CSS in a more dynamic way through the introduction of variables and nested rules.

One of the best things about Sass is that you can write pure CSS within the .scss files without any issues, and only when you want to take advantage of Sass capabilities do you have to then start getting more advance.

A very powerful capability of Sass is the ability to use Mixins.  To take the perfect explanation from the Sass reference:

Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce a wide variety of styles with very few mixins.

I have a few favourite mixins that I like to use in my projects (and have been used on this site).

Clearfixin

Clearfix is an often used tool when dealing with Floats. It breaks the float rule currently applied and returns the document back to the natural flow of the page. This often happens when we need to float an element inside of the page, like a button for instance, and then need to clear the float so it doesn’t mess around the the remaining content layouts.

Mixin Code

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

Applying Mixin in Sass

.button {
/* my button styles */
@include clearit
}

Transitions

Transitions are a nice and easy way to bring a little bit of animation to lift the visual interactions with our users. Rather than allow something to happen immediately, like a hover style on a button, you add a transition between the two states to make the change seem more meaningful.

/* @include transition(all,2s,ease-out); */
@mixin transition($what: all, $time: 0.2s, $how: ease-in-out) {
    -webkit-transition: $what $time $how;
    -moz-transition:    $what $time $how;
    -ms-transition:     $what $time $how;
    -o-transition:      $what $time $how;
    transition:         $what $time $how;
}

Applying Mixin in Sass

a.button {
/* button styles */
@include transition (all, 0.5s, ease)
}

a.button:hover {
/* overriding styles for the button hover*/

}

Breakpoints

By far the most used of my mixins is the breakpoint mixin

This allows you to declare all your specific breakpoints in a single location and then easily recall then when writing your Sass later on. Previously we might have written all our Styles in their own CSS file (a mobile or tablet, or desktop stylesheet for example), or we might declare all our CSS for the mobile first in the stylesheet, then declare another breakpoint and include all of the overrides and so on.

This allows us to write all of the versions of our module in the same place and have the media queries sprinkled through where we need them

Below we are declaring a desktop, laptop, phablet, and mobileonly breakpoints. These are abstract names and they should really be huge, large, medium, small… but I wrote these well before I became a huge device agnostic fan and I haven’t gone back to fix them just yet.

Mixin Code

 @mixin breakpoint($point) {
   @if $point == desktop {
     @media (min-width: 70em) { @content ; }
  }
   @else if $point == laptop {
     @media (min-width: 64em) { @content ; }
  }
    @else if $point == tablet {
     @media (min-width: 50em) { @content ; }
  }
   @else if $point == phablet {
     @media (min-width: 37.5em)  { @content ; }
  }
  @else if $point == mobileonly {
     @media (max-width: 37.5em)  { @content ; }

  }
}

Applying Mixin in Sass

Now that they’s been declared we can call them anywhere in our scss. Below is the some of the CSS from the podcasts section of the site. I start by setting the margin for the module, and then when the media query matches the phablet query ( or min-width: 37.5em as declared above. I’ve even added a spot for desktop styles although I haven’t felt the need to add anything yet.

.podcasts {
  margin: 1em auto;
  @include breakpoint(phablet){
  width: 100%;
  }
  @include breakpoint(desktop){
    // maybe some desktop layout styles.
  }
}

Heading Mixins

This is a great little trick that I picked up from the team at Bearded

The approach is to declare the standard heading styles through the heading mixin. This allows you to easily update all of the headings with a quick update to one section (also all of them should have the same margin/line-height to keep a similar rhythm).

The second part of this declares each heading separately, heading-1, heading-2… which all get the standard heading mixin as well as declaring the font size for each heading.

Mixin Code

@mixin heading {
  @include title-face;
  margin-bottom: 0.35em;
  line-height: 1.2;
  color: inherit;
  a {
    @include heading-link;
  }
}

@mixin heading-1 {
  @include heading;
  font-size: 3.375em;
}

@mixin heading-2 {
  @include heading;
  font-size: 2.966em;
}

@mixin heading-3 {
  @include heading;
  font-size: 1.5em;
}

@mixin heading-4 {
  @include heading;
  font-size: 1.318em;
}

@mixin heading-5 {
  @include heading;
  font-size: 1em;
}

@mixin heading-6 {
  @include heading;
  font-size: 0.875em;
}

Applying Mixin in Sass

Now that we’ve got our heading mixing this is how we then apply them in the Sass.

h1 { @include heading-1; }
h2 { @include heading-2; }
h3 { @include heading-3; }
h4 { @include heading-4; }

The great thing about this approach is when it comes to having the need to put a h2 in a sidebar but you need it to be in the style of a heading 4 then you just use the following code.

.sidebar h2 { @include heading-4; }

Wrap up

So those are the mixins that I find the most useful in my day to day work. There are literally hundreds of possible Mixins that could be created and the only limit is your imagination (and coding ability probably). If you come across any really helpful mixins please let me know in the comments and I’ll add them into the list.