Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Sass Mixins

DZone's Guide to

Sass Mixins

In this post, we take a look at this cool feature that you can use in your CSS. So get read to have a new trick it mixin to your front-end repertoire.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

This is the third post about specific Sass features and this one is about mixins. The previous posts were about the import feature and the extend feature (and there was one about nesting in general).

The feature under discussion today, mixin, is used in specific situations. While you won't need it too often, it's still good to know.

@mixin

To define this feature, type @mixin and the name of your creation. After that, in CSS style - i.e. within {} - list all the properties you want to be defined with @mixin.

@mixin creation-name{
    property1:value;
    property2:value;
    property3:value;
 }

When it is defined, you should use it somewhere. To call the mixin feature, type @include followed by the mixin's name inside of selector.

 selector{
    @include creation-name;
 }

After compiling this code into CSS, it will look like this:

 selector{
    property1:value;
    property2:value;
    property3:value;    
 }

Flexible Mixin

A mixin lets you pass in an argument to make it flexible. This is defined by adding the value after the name of the mixin. That value can be used inside of mixin (as many times as you need it).

 @mixin creation-name($value){
    property1:$value;
    property2:value;
    property3:value;
 }

After mixin is defined this way, and you've called it after @include and the creation name, you must forward that value.

 selector{
    @include creation-name(10px);
 }

After compiling it'll look like this:

selector{
    property1:10px;
    property2:value;
    property3:value;    
 }

You can add an infinite number of values inside of () separated with ,

Where to Use it

Now that you understand what mixin is all about, let's go over some specific cases for it. Everyone who works with Sass (and uses it right) has their own collection and this is mine:

Pseudo

When using ::before and ::after you'll always need these three elements, so we're saving two lines of code every time you use this.

@mixin pseudo{
    content: '';
    display: block;
    position: absolute;
}

Position Center

Block horizontal and vertical centering helper (Important: you must have a parent element with position: relative).

@mixin center {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 }

Placeholders

I still believe that mixin was invented for us to use with browsers prefixes. This is just one example of that.

 @mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
 }

Breakpoints

You can use breakpoints or media queries, but, either way, you're going to like this. In this example, the @content mixin feature is used. You can understand from the example that this feature allows us to add CSS inside of @include.

@mixin bp-large {
    @media only screen and (max-width: 60em) {
        @content;
    }
}
@mixin bp-medium {
    @media only screen and (max-width: 40em) {
        @content;
    }
}
@mixin bp-small {
    @media only screen and (max-width: 30em) {
        @content;
    }
}

Here's how to use it:

.sidebar {
    width: 60%;
    float: left;
    @include bp-small {
        width: 100%;
        float: none;
    }
}

Here are some other collections that you can find a lot of interesting things in:
Andy.scss, bourbon, npm, and, if you want the advanced option of the mixin feature check, this post.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
web dev ,sass ,css ,css preprocessor ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}