The Why What and How of Sass mixin.

As a developer, we need to write a lot of code. So, what we try to do is write reusable code.

That’s where Sass mixin comes into play. With Sass mixin, we can create all types of reusable css. That makes life a lot easier.

So, today we are going to see why, what, and how of sass mixin.

Let’s get started.

What is a mixin?

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.

For example, we want to use the grid for our project. So, without mixin, what we do is select the elements we want to use grid then add all the grid properties to it.

That breaks the DRY rule and it’s boring too. That’s where mixin comes into play.

How to create a mixin?

So, how do you create a mixin?

It's as simple as declaring a function. All you need to do is add @mixin before the mixin name and after that a pair of curly braces.

@mixin grid {
    display: grid;
}

Now, you can use this mixin inside any element you want and that will be a display grid.

How to use a mixin?

So, how do you use a mixin?

it’s simpler than declaring a mixin. all you need to do is add @inclued before the mixin name you want to use.

.div {
    @include grid;
}

Make reusable code with mixin arguments.

Creating a grid mixin will work for a while. But, if we want to use more grid properties like align-items, place-items.

@mixin grid {
    display: grid;
    justify-content: start;
    align-items: start;
    place-items: start;
    grid-gap: 50px 100px;
}

We, need to create deffrent mixin for diffrent values.

To, give you an idea the place-items property has 5 values. so we need to create five different mixins to use all the values.

But, we don’t need that.

We can just pass arguments to the grid mixin. Then it will do the job.

@mixin grid($justify-content, $align-items, $place-items) { 
    display: grid;
    justify-content: $justify-content;
    align-items: $align-items;
    place-items: $place-items;
}

Just like a function, we just say the argument's name and then use that inside the mixin.

Notice that you need to pass sass variables as arguments, that is, just add a dollar sign before the name.

Arguments Default value

You can also pass the default value to the arguments. The values are most of the time used you can pass them as default values.

Like this:

@mixin grid($justify-content: start, $align-items: start, $place-items: start) { 
    display: grid;
    justify-content: $justify-content;
    align-items: $align-items;
    place-items: $place-items;
}

Reusable code with @content block

Mixin also takes code blocks with the @content.

The @content can be used in the responsive mixin. Let’s say we want to create a break point mixin.

@mixin break-point {
    @media (min-width: 500px) {
        @content;
    }
}

What it does is whenever we call the break-point mixin and add the code that code will be applied to 500px breakpoint.

That makes life much simpler.

Resources:

https://sass-lang.com/documentation/at-rules/mixin

Conclusion

In this article, we what CSS positioning is and what is position absolute and relative.

Hope this was helpful.

If you enjoyed reading it. Check out my weekly newsletter, where I share the best web development resources and my best content.

I also create videos, check out my Channel here.

you can find me on Twitter at @coderamrin

Thanks for reading.