Sass Mixins to Kickstart Your Project

Share this article

Key Takeaways

  • Sass Mixins are beneficial for creating reusable CSS declarations, making your code more maintainable and efficient. They can also accept arguments, enabling the creation of complex CSS rules with fewer lines of code.
  • The article provides examples of several useful Mixins, including a sizing Mixin for defining width and height, a positioning Mixin for offsets, a vendor prefix Mixin to handle browser-specific prefixes, an opposite direction Mixin, and a breakpoint handler Mixin for responsive design.
  • The vendor prefix Mixin is particularly useful for dealing with browser compatibility issues. It automatically adds the necessary vendor prefixes (-webkit-, -moz-, etc.) to CSS properties, saving time and ensuring cross-browser compatibility.
  • The breakpoint handler Mixin simplifies the process of working with media queries in responsive design. It allows you to store various breakpoints in variables and then retrieve them using a name, making it easier to manage and use different media queries.

Mixins are great, aren’t they? They are like functions that output CSS. According to the Sass docs:

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.

Mixins are really convenient, especially when working on a large project. How many times have you had to define width and height values in your last project? How many times have you Googled how to do a triangle in CSS? Or haven’t you ever wished there was a shorthand for top, right, bottom, left when using CSS positioning?

You can solve all those problems with mixins. Even better: you won’t have to write them since I’ve already done that for you. Here we go guys, a couple of Sass mixins to kickstart your projects!

Sizing Mixin

I bet you already know this one. I use it as a mixin 101 in all my projects: a size() mixin defining both the width and the height. First argument is the width, second one is the height. If height is omitted, it falls back to the width value.

@mixin size($width, $height: $width) {
      width: $width;
      height: $height;
}

Simple enough.

Example Usage

Sass:

.element {
  @include size(100%);
}

.other-element {
  @include size(100%, 1px);
}

CSS output:

.element {
  width: 100%;
  height: 100%;
}

.other-element {
  width: 100%;
  height: 1px;
}

Positioning Mixin

If there is one shorthand I really think CSS misses, it’s a shortcut for offsets: top, right, bottom and left. We have shorthands for everything: padding, margin, background, even text-decoration! But we still don’t have one for offsets… So I built my own.

It was inspired by Stylus’ syntax:

absolute: top 0 left 1em

Unfortunately, Sass doesn’t provide a transparent mixin feature so, at best, we can come up with something like this:

@include absolute(top 0 left 1em);

… which is not that bad, you have to admit. Obviously we’ll also have relative() and fixed() which work the same way.

I dedicated a whole blog post to the making of this mixin so I won’t get too deep into details here, but the main idea is to provide a list of values to the mixin. Whenever a keyword is found (top, right, bottom, left), the value directly after the keyword gets applied to it, as long as it is a valid value.

@mixin position($position, $args) {
  @each $o in top right bottom left {
        $i: index($args, $o);

    @if $i and $i + 1< = length($args) and type-of(nth($args, $i + 1)) == number  {
          #{$o}: nth($args, $i + 1);
    }
  }

  position: $position;
}

@mixin absolute($args) {
        @include position("absolute", $args);
}

@mixin fixed($args) {
        @include position("fixed", $args);
}

@mixin relative($args) {
        @include position("relative", $args);
}

Example Usage

Sass:

.element {
  @include absolute(top 0 left 1em);
}

.other-element {
  @include fixed(top 1em left "WAT? A STRING?!" right 10% bottom)
}

CSS output:

.element {
  position: absolute;
  top: 0;
  left: 1em;
}

.other-element {
  position: fixed;
  top: 1em;
  right: 10%;
}

Vendor Prefix Mixin

You know how you have to prefix some properties with -webkit- or -moz- (among other prefixes) for them to work across browsers because they are non-standard properties? Then you also know how annoying that can be. This is precisely the type of thinking Compass and Bourbon try to fix by providing a collection of mixins dealing with prefixes for you (e.g. @include box-sizing()).

I have been using Compass for long now but I have recently decided to ditch it. The main reason is I wasn’t using it enough to keep it in projects; in the end, this means faster compilation times. That being said, I found myself in need of vendor prefix mixins. So I built one (and updated it when moving to Sass 3.3).

Sass 3.2 Version

The idea is very simple. The first argument is the property. The second argument is the value for that property. Third and optional argument is the list of prefixes to use. Default value dumps all prefixes.

@mixin prefix($property, $value, $vendors: webkit moz ms o) {
      @if $vendors {
        @each $vendor in $vendors {
          #{"-" + $vendor + "-" + $property}: #{$value};
        }
      }
      #{$property}: #{$value};
}

Example Usage

Sass:

.element {
  @include prefix(transform, rotate(42deg), webkit ms);
}

Ouput:

.element {
  -webkit-transform: rotate(42deg);
  -ms-transform: rotate(42deg);
  transform: rotate(42deg);
}

Sass 3.3 Version

My Sass 3.3 version is even better because it allows you to prefix multiple properties at once, and to have a nicer syntax. Basically, instead of having two distinct arguments for property and value, you have only one: A map of declarations. Keys are properties, values are values.

@mixin prefix($map, $vendors: webkit moz ms o) {
  @each $prop, $value in $map {
        @if $vendors {
          @each $vendor in $vendors {
            #{"-" + $vendor + "-" + $prop}: #{$value};
          }
        }
        // Dump regular property anyway
        #{$prop}: #{$value};
  }
}

Example Usage

Sass:

.element {
  @include prefix((transform: translate(-50%, -50%)), webkit ms);
}

.other-element {
  @include prefix((
    column-count: 3,
    column-gap: 1em,
    column-rule: 1px solid silver,
    column-width: 20em
  )), webkit moz);
}

CSS output:

.element {
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.other-element {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  -webkit-column-rule: 1px solid silver;
  -moz-column-rule: 1px solid silver;
  column-rule: 1px solid silver;
  -webkit-column-width: 20em;
  -moz-column-width: 20em;
  column-width: 20em;
}

Pushing Things Further

What’s cool with this mixin is it can easily be used in other mixins to avoid having to type prefix() and the vendor prefixes every time. Think of something like this:

@mixin transform($value) {
      @include prefix(transform, $value, webkit ms);
}

@mixin column-count($value) {
      @include prefix(column-count, $value, webkit moz);
}

And here’s the example usage:

.element {
  @include transform(rotate(42deg));
}

And the CSS output:

.element {
  -webkit-transform: rotate(42deg);
  -ms-transform: rotate(42deg);
  transform: rotate(42deg);
}

Opposite Direction Mixin

If you’re a user of Compass, you may be familiar with the opposite-direction function (yes, this one is a function and not a mixin, but whatever). The one from Compass is built in Ruby but it’s quite easy to make a Sass one. The one I made relies on Sass 3.3 but it can easily be tweaked to be available to Sass 3.2.

What I like in my function is it allows you to pass a list of directions, so that you get bottom left from opposite-direction(top right). It can be useful when dealing with background-position, for instance.

@function opposite-direction($directions) {
      $opposite-directions: ();
      $direction-map: (
    'top': 'bottom',
    'right': 'left',
    'bottom': 'top',
    'left': 'right',
    'ltr': 'rtl',
    'rtl': 'ltr'
  );

  @each $direction in $directions {
    $opposite-direction: map-get($direction-map, $direction);
        @if $opposite-direction != null { 
      $opposite-directions: append($opposite-directions, #{$opposite-direction});
    }
    @else {
      @warn "No opposite direction can be found for `#{$direction}`.";
    }
  }

  @return $opposite-directions;
}

Example Usage

$direction: opposite-direction(top); 
// bottom

$other-direction: opposite-direction(bottom left);
// top right

Breakpoint Handler Mixin

If you’ve ever had to do some responsive design, you know working with several different media queries can be hard. It’s often a good idea to store the various breakpoints in variables so they can easily be retrieved without having to be typed all over again every single time.

If you want to take it a step further, you might want to name your breakpoints — which is a very good idea if you want my opinion. This basically means a media query is mapped to a name so you only have to give your breakpoint handler mixin a name to make it dump a media query. Many smart developers including Chris Coyier have made the idea quite popular.

Now if you want to go even further, you can store all those breakpoints in a global map, then make the mixin retrieve the breakpoint based on the name you pass it. Please consider the following code:

$breakpoints: (
  'tiny':   ( max-width:  767px ),
  'small':  ( min-width:  768px ),
  'medium': ( min-width:  992px ),
  'large':  ( min-width: 1200px ),
  'custom': ( min-height:  40em )
);

@mixin breakpoint($name) {
      @if map-has-key($breakpoints, $name) {
        @media #{inspect(map-get($breakpoints, $name))} {
      @content;
    }
  }
  @else {
    @warn "Couldn't find a breakpoint named `#{$name}`.";
  }
}

If the string passed to the breakpoint mixin matches a key in the $breakpoints map, the mixin opens a @media directive, using the inspect function (from Sass 3.3 as well) to literally dump a map. When doing inspect((key: value)), (key: value) gets printed as is in the stylesheet.

If the string doesn’t match an existing breakpoint, then the user gets warned through the @warn directive, printing an error message in his console.

Example Usage

Sass:

.element {
  color: red;

  @include breakpoint(medium) {
    color: blue;
  }
}

CSS output:

.element {
  color: red;
}

@media (min-width: 992px) {
  .element {
    color: blue;
  }
}

Final Thoughts

I think that’s a good start! Those tools should help get rid of some time-consuming tasks when writing the CSS for your next project. Be sure to use them, tweak them and give your feedback!

Frequently Asked Questions (FAQs) about SASS Mixins

What are the benefits of using SASS Mixins in my project?

SASS Mixins are a powerful feature that can significantly enhance your project. They allow you to reuse CSS declarations throughout your stylesheet, which can save you time and make your code more maintainable. Mixins can also accept arguments, which makes them incredibly flexible. You can use them to create complex CSS rules with just a few lines of code. Additionally, using Mixins can help to keep your code DRY (Don’t Repeat Yourself), which is a key principle in software development.

How do I create a SASS Mixin?

Creating a SASS Mixin is straightforward. You start by using the @mixin directive followed by a name for your Mixin. Then, you include the CSS declarations that you want to reuse inside curly braces {}. For example, you could create a Mixin for a simple transition effect like this:
@mixin transition($property: all, $duration: 1s, $timing: ease) {
transition: $property $duration $timing;
}
You can then include this Mixin in your CSS rules using the @include directive.

Can I pass arguments to a SASS Mixin?

Yes, you can pass arguments to a SASS Mixin. This allows you to customize the CSS declarations that the Mixin generates. For example, you could create a Mixin for a border with a customizable color and width like this:
@mixin border($color: black, $width: 1px) {
border: $width solid $color;
}
You can then include this Mixin in your CSS rules and pass the color and width as arguments.

How do I include a SASS Mixin in my CSS rules?

You can include a SASS Mixin in your CSS rules using the @include directive followed by the name of the Mixin. If the Mixin accepts arguments, you can pass them in parentheses after the name. For example, you could include the border Mixin from the previous question like this:
.box {
@include border(red, 2px);
}
This will generate a CSS rule with a 2px solid red border.

Can I use SASS Mixins with media queries?

Yes, you can use SASS Mixins with media queries. This can be very useful for creating responsive designs. You can include the media query inside the Mixin, or you can include the Mixin inside the media query, depending on your needs. For example, you could create a Mixin for a responsive font size like this:
@mixin responsive-font-size($size) {
font-size: $size;
@media (max-width: 600px) {
font-size: $size * 0.8;
}
}
You can then include this Mixin in your CSS rules to automatically adjust the font size for smaller screens.

Can I use SASS Mixins to generate vendor prefixes?

Yes, you can use SASS Mixins to generate vendor prefixes. This can save you a lot of time and ensure that your CSS is compatible with different browsers. For example, you could create a Mixin for the transform property like this:
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
You can then include this Mixin in your CSS rules to automatically generate the necessary vendor prefixes.

Can I use SASS Mixins in combination with other SASS features?

Yes, you can use SASS Mixins in combination with other SASS features like variables, nesting, and functions. This allows you to create complex CSS rules with just a few lines of code. For example, you could create a Mixin for a gradient background with customizable colors like this:
@mixin gradient-background($color1, $color2) {
background: $color1;
background: linear-gradient(to right, $color1, $color2);
}
You can then include this Mixin in your CSS rules and pass the colors as arguments.

Can I use SASS Mixins to create CSS animations?

Yes, you can use SASS Mixins to create CSS animations. This can make your animations more maintainable and easier to create. For example, you could create a Mixin for a simple fade-in animation like this:
@mixin fade-in($duration: 1s) {
animation: fade-in $duration ease-in;
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
}
You can then include this Mixin in your CSS rules to apply the animation.

Can I use SASS Mixins to create complex CSS rules?

Yes, you can use SASS Mixins to create complex CSS rules. This can make your code more readable and maintainable. For example, you could create a Mixin for a box with a shadow and a border like this:
@mixin box($color: black, $width: 1px, $shadow: 2px 2px 5px rgba(0,0,0,0.2)) {
border: $width solid $color;
box-shadow: $shadow;
}
You can then include this Mixin in your CSS rules and pass the color, width, and shadow as arguments.

Can I use SASS Mixins to create reusable CSS patterns?

Yes, you can use SASS Mixins to create reusable CSS patterns. This can save you a lot of time and make your code more maintainable. For example, you could create a Mixin for a flex container with customizable alignment like this:
@mixin flex-container($justify: center, $align: center) {
display: flex;
justify-content: $justify;
align-items: $align;
}
You can then include this Mixin in your CSS rules and pass the justify and align values as arguments.

Kitty GiraudelKitty Giraudel
View Author

Non-binary trans accessibility & diversity advocate, frontend developer, author. Real life cat. She/her.

sasssass mixins
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week