SCSS Mixins

Let's get a closer look at using @mixins in SCSS. You can look at mixins like the import we used before. But mixins place a certain set of codes on the element we are mixing in.

Defining our Mixin permalink

We use the @mixin directive to define our mixin, so let's go ahead and create our first one:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Note: Naming in SCSS can be either with - or _ they are considered the same and can be used at the same time!

Using our Mixin permalink

To use our mixin we simply use the @include statement:

.container {
  @include flex-center;
  height: 100vh;
}

Our properties on the mixin will now also exist on the container element.

Mixin inside a Mixin permalink

Another cool thing we can do is use mixins inside each other like so:

@mixin font {
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 2rem;
}
@mixin flex {
  display: flex;
}
@mixin flex-center {
  @include flex;
  @include font;
  justify-content: center;
  align-items: center;
}

Mixin and Arguments permalink

Something that is really strong for using mixins is the use of arguments.

We can define our mixin as such:

@mixin button($background: blue, $padding: 10px, $color: #fff) {
  background: $background;
  padding: $padding;
  display: block;
  border-radius: 5px;
  color: $color;
}

Note: We added default parameters, but these are not mandatory, you can leave them out.

And once we call it, pass these arguments:

.box {
  @include button(#7afdd6, 20px, #ffffff);
}

Pro-tip permalink

A really good pro-tip is to use Mixins for vendor prefixes! It will safe you so much time for border-radius for example:

@mixin border-radius($amount) {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: $amount;
  /* Firefox 1-3.6 */
  -moz-border-radius: $amount;
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: $amount;
}

And we use this like so:

@include border-radius(20px);

Have a play around with these examples on Codepen.

See the Pen SCSS Mixins by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter