Shorthand Sass Mixins

Ever since I started writing Sass I’ve always loved using mixins. Instead of duplicating style declarations a mixin will handle that for you in one fell swoop. Mixins are a very powerful feature of Sass that we don’t have in the CSS spec… Yet! Luckily, as long as Sass is still around and more company’s adopt it, the more code can stay DRY and modular within the codebase.

Let’s see how this works with the .sass syntax example I have below!

The Scenario

Let’s say you have many components on a page, possibly some type of card component laid out in a grid. And that card, or parent component has children that are all horizontally and vertically centered within it. No matter how you shake it, these children will always be vertically and horizontally centered.

How many times have we used different types of hacks to achieve one of the most difficult things we have had to do in the history of CSS? I know, that struggle was real, but today we can achieve that in just three lines of code! Don’t believe me?

We’re going to couple the flexbox properties with the mixins shorthand to create a block of code that can be used all over the place if need be.

The great thing about mixins is that we can create multiple mixins for different scenarios and just swap them out where necessary.

The Code - Before

A lot of times, the syntax we use to create mixins reflect the examples below.

@mixin center-content
  display: flex
  justify-content: center
  align-items: center

.parent-container
  @include center-content

We declare a mixin using the @mixin syntax followed by the mixin name. We than follow that by the styles that will be applied when we use it.

When we decide to use that mixin, we add @include followed by the name of the mixin, within our class. This compiles down to this:

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

The Code - After

Instead of using the “@” symbol to declare the mixin and include it, we can start using the “=” and “+” symbols as shorthands respectively when using the .sass syntax.

We can do the same exact thing as above, using this awesome shorthand.

=center-children
  display: flex
  justify-content: center
  align-items: center

.parent-container
  +center-children

Creating mixins this way is just a faster way of doing it. The code above compiles down to this:

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Pretty neat right? There are so many cool tricks and things you can do with Sass that you still can’t do with CSS, but that’s rapidly changing. CSS is amazing and I’m proud to consider myself a CSS developer. CSS is starting to implement some of the cool things that Sass, Less, and Stylus can do like CSS variables (Custom Properties). Even support for CSS Nesting should be coming soon!

Wrapping Up

I hope you enjoyed this snippet of knowledge if you are writing your CSS styles using the Sass preprocessor. Like I said, check out the Sass docs for all the awesome things you can do. And don’t forget, CSS is amazing and it isn’t going anywhere!