3 Useful and Reusable SASS Mixins

When you’ve been writing CSS for a while, you come across certain snippets of code you write a lot. One of the greatest things about using SASS is the ability to abstract out these bits of code and instead insert a placeholder for them. This way, we don’t have to write out the full snippet every time we want to include it, and changes can be easily made to the snippet globally.

I've put together a few of these mixins in a github repository. But here are 3 of these mixins I wrote and now include in every project.

Media Queries #

In most projects, I tend to have a few standard breakpoints at which I change the layout for a number of elements. With SASS, I am able to abstract these out to make sure they are consistent across my CSS base.

// Define the breakpoints
$breakpoint-small: 600px;
$breakpoint-med-small: 960px;
$breakpoint-med: 1175px;

@mixin screen($size, $type: max, $pixels: $breakpoint-small) {

  @if $size == 'small' {
    @media screen and ($type + -width: $breakpoint-small) {
        @content;
    }
  }

  @else if $size == 'med-small' {
    @media screen and ($type + -width: $breakpoint-med-small) {
        @content;
    }
  }

  @else if $size == 'med' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }

 @else if $size == 'large' {
    @media screen and ($type + -width: $breakpoint-med) {
        @content;
    }
  }

  @else if $size == 'custom' {
    @media screen and ($type + -width: $pixels + px) {
     @content;
    }
  }

  @else {
    @content;
  }

}

To use the mixins, I write -

.foo {
  @include screen(large) {
    width: 20%;
  }
  @include screen(med) {
    width: 40%;
  }
  @include screen(med-small) {
    width: 60%;
  }
  @include screen(small) {
    width: 80%;
  }
  @include screen(custom, max, 400) {
    width: 100%;
  }
}

Centering Elements #

We all know that centering elements in CSS can be a pain. There a many ways to centre an element depending on what you want to achieve. In many cases, I use the method of having the element be absolutely positioned and a combination of the offset and transform properties.

@mixin center($position) {
  position: absolute;

  @if $position == 'vertical' {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  @else if $position == 'horizontal' {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
  }

  @else if $position == 'both' {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

}

To use this mixin, I write -

.foo {
  @include center(both);
}
.foo-parent {
  position: relative;
}

Hiding and Showing Elements with a Transition #

Frequently, there are cases where I want to have an element hidden or displayed depending on a state and using a transition effect. Although there are many ways to hide an element in CSS, for these cases, I typically use the visibility/opacity method.

I use the following mixin for this -

@mixin fade($type) {

  @if $type == 'hide' {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s;
  }

  @else if $type == 'show' {
    visibility: visible;
    opacity: 1;
    transition: visibility 1s, opacity 1s;
  }

}

To use the mixin, I write -

.foo .bar {
  @include fade(hide);
}
.foo:hover .bar {
  @include fade(show);
}