Loading...

Going Deeper with SASS Mixins

In my last article, I introduced SASS variables as an efficient way of using color variables. Let’s take SASS a step further and start adding in additional functionality and reusable code such as SASS Mixins. Stayed tuned for more articles covering placeholders, functions, and much more.

What are Sass Mixins?

Mixins are a great way to start learning how to reuse SASS code. They give us a taste for creating reusable snippets of code and even allow us to pass in information to create a more transferable code block. This is vital when writing DRY code. As developers, we want to rewrite code as infrequently as possible. Similar to functions in languages like PHP, Mixins allow us to write a code block once and reuse it as needed. This decreases the amount of time we spend writing code and allows us to make changes to multiple sections of code at once.

Mixins also allow us to create consistency across different sections of our website or application. Because we are using the same code base, our design will have a starting point for reuse. We don’t need to copy and paste large sections of code in order to match different sections of our site.

For Example

Let’s take a look at a common bit of code and see how we can transform that into a mixin to help us reuse it. In the example, we will be styling a “typical” sidebar widget. It’s common to have multiple sidebar sections that have a similar look and feel, so this is a perfect example of using mixins to save us time and provide consistency.

    
        .sidebar-widget {
            background: $color-gray-iron;
            border: 1px solid $color-green-emerald;
            font-size: $font-size-secondary;
        }

This is a solid rule. Each declaration is using proper variables as values and, pending we are using the .sidebar-widget class on each widget, we have solid CSS. At this point, it’s not really advantageous to create a mixin, but let’s try it out anyway. Soon, we will discover the real power in SASS Mixins.

First let’s create the mixin:

    
        @mixin () {
            background: $color-gray-iron;
            border: 1px solid $color-green-emerald;
            font-size: $font-size-secondary;
        }
    

Now, let’s implement it. We’ll take it a step further and use the same widget styles for the footer.

    
        .sidebar-widget {
            @include sidebar-widget();
        }
        .footer-widget {
            @include sidebar-widget();
        }
    

Should we choose to use the same styles in other sections of our code, we now have a solid base to start from. How great is that? We have reusable code that we can transfer to multiple sections of our code, reducing our code time (copying and pasting) and keeping things uniform! Great! But wait, our sidebar widgets and our footer widgets all look the same. From a code standpoint, it looks great, but from a design standpoint, not so much.

Adding Parameters to the Mixin

This is where the real fun begins. Let’s add some parameters to our mixin call. This will allow us to pass in information for our mixin to use.

    
        @mixin ($background-color, $border-color, $font-size) {
            background: $background-color;
            border: 1px solid $border-color;
            font-size: $font-size;
        }
    

Using the mixin with our variables.

    
    .sidebar-widget {
        @include sidebar-widget($color-gray-iron, $color-green-emerald, $font-size-secondary);
        }
        .footer-widget {
            @include sidebar-widget($color-gray-codgray, $color-white, $font-size-secondary);
        }
    

Super! We are writing much less code and getting a great and uniform output! We can implement this strategy across our entire site or app and achieve wonderful results. But, now we need to remember the colors we used previously or look them up every time. We didn’t even change all of the parameters we need.

Adding Default Values to Your Parameters

There is a solution for that! SASS mixins has reusability in mind and has the ability for you to add default values to your parameters (not to be confused with default which will be covered in an upcoming article). When creating a mixin you can, and usually should, set a default value for each parameter. Adding default values to your mixins allow for easier reusability and consistency.

Here is our same mixin, but with defaults in place.

    
        @mixin ($background-color: $color-gray-iron, $border-color: $color-green-emerald, $font-size: $font-size-secondary) {
            background: $background-color;
            border: 1px solid $border-color;
            font-size: $font-size;
        }
    

Using the mixin with our variables and defaults.

    
        .sidebar-widget {
            @include sidebar-widget();
        }
        .footer-widget {
        @include sidebar-widget($background-color: $color-gray-codgray, $border-color: $color-white);
        }
    

Our .sidebar-widget declaration now uses the default selection for each parameter. .footer-widget sets only the parameters that are different. This cuts down on our custom code a great deal. Now we can reuse our mixin in many more places while still ensuring DRY principles. Later on, if we decide to change a parameter default, we only need to adjust one line of code.

SASS Mixins are a great way to keep your code DRY and decrease development time. We’ve just scratched the surface of mixins and SASS, but already we are rapidly improving our skillset. Check back soon for the next article in the series. We will discuss placeholders and when to use a mixin or a placeholder. We’ll also discuss how to decide between the two based on a variety of factors.