5 SASS Mixins That I Use on Nearly Every Project

SASS is pretty great! It's become so integrated into my workflow that it's easy to underestimate how much I rely on it. I've had the pleasurable woeful experience of revisiting some of my older projects that used vanilla CSS, and it's a bit like going back to a page layout rocking tables. It just doesn't feel right, and you quickly realize how much time and headaches you've saved by using SASS on your newer projects.

With that said, I thought I'd showcase a handful of mixins that I use on nearly every project. Nothing earth shattering here, but I find them useful, hopefully you will too.

1) Absolute Centering

Sure, you can do this with Flexbox, but a lot of times this mixin is all I need, and it works fine in modern browsers.

@mixin absolutecenter($axis: "both"){
  position:absolute;
  @if $axis == "y"{
    top: 50%;
    transform: translateY(-50%);
  }
  @if $axis == "x"{
    left: 50%;
    transform: translateX(-50%);
  }
  @if $axis == "both"{
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
}

An Absolute Centering Example

See the Pen Absolute Centering Mixin with SASS by Andrew Houle (@andrewhoule) on CodePen.

2) RGBA Backgrounds & Colors

This is a cool mixin for dealing with transparency. I like having one mixin to handle both opaque backgrounds and opaque text with a fallback. This mixin is inspired by this one by Stuart Robson.

@function solid-lighten($color, $percentage) {
  @return lighten($color, (1-$percentage)*5%);
}
@function solid-darken($color, $percentage) {
  @return darken($color, (1-$percentage)*5%);
}
@mixin rgba($type, $color, $percentage, $shade: ligthen) {
  @if $shade == lighten {
    @if $type == color {
      color: solid-lighten($color, $percentage);
      color: rgba($color, $percentage);
    }
    @if $type == bg {
      background-color: solid-lighten($color, $percentage);
      background-color: rgba($color, $percentage);
    }
  }
  @else {
     @if $type == color {
      color: solid-darken($color, $percentage);
      color: rgba($color, $percentage);
    }
    @if $type == bg {
      background-color: solid-darken($color, $percentage);
      background-color: rgba($color, $percentage);
    }
  }
}

An RGBA Example

See the Pen Absolute Centering Mixin with SASS by Andrew Houle (@andrewhoule) on CodePen.

3) Clearing Floats, AKA the Clearfix

Us front-enders have been rocking the clearfix to deal with floats for a long time. This is a mixin that utilizes Nicolas Gallahger's hack. Of course if you don't need to support IE9 and down, you can achieve this sort of thing using flexbox.

@mixin cf() {
  *zoom: 1;
  &:before, &:after {
    content: '';
    display: table;
  }
  &:after {
    clear: both;
  }
}

For posterity sake... After publishing this article, quite a few people suggested that I could use a placeholder selector to do this more efficiently (e.g. less code). It does seem like an effective solution. Here's a good article about the different approaches you can use.

4) Triangles

Any time you can create something in CSS rather than using an image. Do it. You're saving load times and adding flexibility. So making triangles via CSS is a no-brainer. And this mixin makes it rather easy. 

@mixin triangle($direction, $size: 0.375rem, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
    border-bottom: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }
  @else if ($direction == 'down'){
    border-top: $size solid $color;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
  }
  @else if ($direction == 'left'){
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
  }
  @else if ($direction == 'right'){
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
  }
}

A Triangle Example

See the Pen Absolute Centering Mixin with SASS by Andrew Houle (@andrewhoule) on CodePen.

5) Media Queries

Yes, I tend to design desktop first, rather than mobile first... I know, I know, it's not what the cool kids are doing, but it works for me. But that's a different article, for a different day. If you design mobile first you can simply edit the mixin from max to min. Of course none of these breakpoints are set in stone, you'll need to update this mixin to account for what you need on your project.

@mixin bp($point) {
  @if $point == xl { // 1050px
    @media (max-width: 65.625rem) { @content; }
  }
  @else if $point == lg { // 900px
    @media (max-width: 56.25rem) { @content; }
  }
  @else if $point == md { // 768px
    @media (max-width: 48rem)  { @content; }
  }
  @else if $point == sm { // 600px
    @media (max-width: 37.5rem)  { @content; }
  }
  @else if $point == xs { // 400px
    @media (max-width: 25rem)  { @content; }
  }
}

A Media Query Example

See the Pen Absolute Centering Mixin with SASS by Andrew Houle (@andrewhoule) on CodePen.

Share

Comments