SASS mixins I'm using right now

I love SASS! Prior to using Sass my CSS workflow was horrendous. If you’ve been in the development world for a few years, you probably came from the land of writing CSS in repetitive selectors like me. Having to manually type each and every style out often makes me take the technology we have today for granted.

Sass has many features, but my favorite is mixins. These little devils save so much time and effort that I had to take some time to curate a blog post about them. I hope you enjoy my favorites and I also hope you will share your own.

Transitions

We start off with a very simple mixin. Add any arguments you like or expand it further to accept multiple parameters. I prefer to use the same transitions all the time for most of the work I need. Your mileage may vary.

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

In the wild:

@include transition(ease-in-out .3s background-color);

REM Font Sizes

rem is similar to em when it comes to units and scalability. rem based units are relative to the root element. In this case, the furthest root is the html element of a basic web page. That said, to use rem in the most optimized form you need to set the font-size on the html element accordingly before making use of this mixin.

Note: I stole this mixin from Chris’s post and love it.

html {
 font-size: 62.5%; 
}

And now the mixin:

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

Using it in the wild:

.myContent {
    @include font-size(13);
}

Further reading

Responsive Breakpoints

Responsive design is a must this day and age. What better way to adapt your designs than to have a pre-defined set of mixins for your breakpoints? Below is a summarized version of the mixins I tend to use for responsive CSS. You can add as many as you want depending on what widths you enter.

/* breakpoint screen widths */
$large: 1390px;
$medium: 767px;
$small: 480px;

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

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

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

Here I essentially make use of the @media queries available in CSS but also wrap them in a mixin combined with a corresponding name.

Writing these in your code would look like this:

#myElement {
  @include bp-medium {
     // super neat CSS/SASS code goes here
  }
}

Since I make use of these a lot I also made some quick code snippets in Atom which I’ve added inside my snippets.cson file. If you make use of atom feel free to steal these!

'.source.css, .source.scss, .source.css.scss, .source.sass, .source.css.sass':
  'breakpoint-lrg':
    'prefix': 'large'
    'body': '@include breakpoint(large) { $1 }'

  'breakpoint-med':
    'prefix': 'medium'
    'body': '@include breakpoint(medium) { $1 }'

  'breakpoint-sm':
    'prefix': 'small'
    'body': '@include breakpoint(small) { $1 }'

Calc

Need to do some fancy math inside your CSS but don’t want to think too hard about it? Calc is a handy tool inside of Sass that makes this problem a breeze to solve. Check out the simple mixin:

@mixin calc($property, $expression) {
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}

How its written in the wild:

.box { 
  @include calc(width, “100% - 50px”);
}

And finally, what renders:

.box {
  width: calc(100% - 50px);
  width: -webkit-calc(100% - 50px);
 }

Browser support is pretty decent for modern browsers. More Information can be found here on this topic.

Flexbox

There are tons of mixins you can utilize when it comes to flexbox. The hard part with these is literally remembering them all, not to mention the amount of multi-browser support you will need(unless you use autoprefixer). Sorry in advance for the exhaustive list but these certainly come in handy!

Flexbox

Source

@mixin flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}

How it looks written in the wild:

.container {
  @include flexbox;
 }

Flex Direction

• Values: row | row-reverse | column | column-reverse
• Default: row

Source

@mixin flex-direction($value: row) {
  @if $value == row-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: horizontal;
  } @else if $value == column {
      -webkit-box-direction: normal;
      -webkit-box-orient: vertical;
  } @else if $value == column-reverse {
      -webkit-box-direction: reverse;
      -webkit-box-orient: vertical;
  } @else {
      -webkit-box-direction: normal;
      -webkit-box-orient: horizontal;
  }
  -webkit-flex-direction: $value;
  -moz-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

How it looks written in the wild:

.box {
  @include flex-direction(row);
 }

Flex Wrap

• Values: nowrap | wrap | wrap-reverse
• Default: nowrap

Source

@mixin flex-wrap($value: nowrap) {
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;
  @if $value == nowrap {
      -ms-flex-wrap: none;
  } @else { 
      -ms-flex-wrap: $value; 
  }
  flex-wrap: $value;
}

How it looks written in the wild:

.box {
  @include flex-wrap(wrap);
}

Flex Flow (shorthand for flex direction and flex wrap)

• Values: <flex-direction> | <flex-wrap>
• Default row nowrap

Source

@mixin flex-flow($values: (row nowrap)) {
  // No Webkit Box fallback.
  -webkit-flex-flow: $values;
  -moz-flex-flow: $values;
  -ms-flex-flow: $values;
  flex-flow: $values;
}

How it looks written in the wild:

.box {
  @include flex-flow(row wrap);
 }

Flex Order

The order property controls the order in which the flex items appear within the flex container.

• Default: 0

Source

@mixin order($int: 0) {
  -webkit-box-ordinal-group: $int + 1;
  -webkit-order: $int;
  -moz-order: $int;
  -ms-flex-order: $int;
  order: $int;
}

Flex Grow

Assigns the flex-grow value on the flex item within the flex container.
Remember that negative numbers are invalid.
+ Default: 0

Source

@mixin flex-grow($int: 0) {
  -webkit-box-flex: $int;
  -webkit-flex-grow: $int;
  -moz-flex-grow: $int;
  -ms-flex-positive: $int;
  flex-grow: $int;
}

How it looks written in the wild:

.box {
  @include flex-grow(1);
}

Flex Shrink

Similar to flex-grow this assigns the flex-shrink value on a flex item within the flex container. Again negative values are invalid.

• Default: 1

Source

@mixin flex-shrink($int: 1) {
  -webkit-flex-shrink: $int;
  -moz-flex-shrink: $int;
  -ms-flex-negative: $int;
  flex-shrink: $int;
}

How it looks written in the wild:

.box {
  @include flex-shrink(1);
}

Flex Basis

Assigns the flex-basis property.

• Values: Typically width-like values (e.g. 100%, or 50%)
• Default: auto

Source

@mixin flex-basis($value: auto) {
  -webkit-flex-basis: $value;
  -moz-flex-basis: $value;
  -ms-flex-preferred-size: $value;
  flex-basis: $value;
}

How it looks written in the wild:

.container {
  @include flex-basis(75%);
}

Justify-content

The flex items inside your flex container can be controlled using the justify-content property. This property would be applied to the flex-container itself rather than the flex items inside it.

• Values: flex-start | flex-end | center | space-between | space-around
• Default: flex-start

Source

@mixin justify-content($value: flex-start) {
  @if $value == flex-start {
      -webkit-box-pack: start;
      -ms-flex-pack: start;
  } @else if $value == flex-end {
      -webkit-box-pack: end;
      -ms-flex-pack: end;
  } @else if $value == space-between {
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
  } @else if $value == space-around {
      -ms-flex-pack: distribute;        
  } @else {
      -webkit-box-pack: $value;
      -ms-flex-pack: $value;
  }
  -webkit-justify-content: $value;
  -moz-justify-content: $value;
  justify-content: $value;
}

How it looks written in the wild:

.container {
  @include justify-content(space-between);
}

Align Items

Similar to justify-content but in the perpendicular direction.

• Values: flex-start | flex-end | center | baseline | stretch
• Default: stretch

Source

@mixin align-items($value: stretch) {
  @if $value == flex-start {
      -webkit-box-align: start;
      -ms-flex-align: start;
  } @else if $value == flex-end {
      -webkit-box-align: end;
      -ms-flex-align: end;
  } @else {
      -webkit-box-align: $value;
      -ms-flex-align: $value;
  }
  -webkit-align-items: $value;
  -moz-align-items: $value;
  align-items: $value;
}

How it looks written in the wild:

.container {
  @include align-items(flex-end);
}

Align Content

Aligns the flex container’s lines within the flex container when there is extra space in the cross-axis.

• Values: flex-start | flex-end | center | space-between | space-around | stretch
• Default: stretch

Source

@mixin align-content($value: stretch) {
  // No Webkit Box Fallback.
  -webkit-align-content: $value;
  -moz-align-content: $value;
  @if $value == flex-start {
      -ms-flex-line-pack: start;
  } @else if $value == flex-end {
      -ms-flex-line-pack: end;
  } @else {
      -ms-flex-line-pack: $value;
  }
  align-content: $value;
}

How it looks written in the wild:

.container {
  @include align-content(space-between);
}

Whew! Sorry for the exhausting list. You’re probably sick of flexbox mixins at this point so I’ll switch gears.

Clearfix

Sometimes, if you’re using floats, you need to clear them easily. Rather than needing to add a useless block element to your HTML you can target an existing element and add this mixin.

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

Animation

Animations are fun but what isn’t is writing all the browser prefixing properties inside your SASS (yes, you can use something like gulp-autoprefixerwhen compiled, up to you, though). Thankfully, with mixins, you’ll only need to write them once and later include them in a single line.

All In One Animation

@mixin animation ($delay, $duration, $animation) {
  -webkit-animation-delay: $delay;
  -webkit-animation-duration: $duration;
  -webkit-animation-name: $animation;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-delay: $delay;
  -moz-animation-duration: $duration;
  -moz-animation-name: $animation;
  -moz-animation-fill-mode: forwards;

  animation-delay: $delay;
  animation-duration: $duration;
  animation-name: $animation;
  animation-fill-mode: forwards; 
}

In the wild:

@include animation(1s, 3s, my animation);

Basic Animation

@mixin animation {
    -webkit-animation-name: $animation;
    -moz-animation-name: $animation;
  animation-name: $animation;
}

Animation Delay

@mixin animation-delay($delay) {
  -webkit-animation-delay: $delay;
  -moz-animation-delay: $delay;
  -o-animation-delay: $delay;
  animation-delay: $delay; 
}

Animation Duration

@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
  -moz-animation-duration: $duration;
  -o-animation-duration: $duration;
  animation-duration: $duration;
}

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

Rounding up

Mixins can be simple as hell or as advanced as you’d like. If you want to take things to the next level you can introduce loops, functions, and more inside your mixins to easily style elements which help benefit your application. The main thing to remember is if you are ever in a scenario where you find yourself using multiple styles across multiple elements, then you should probably be using a mixin. Now, go forth and SASS!