Keeping your SCSS DRY

Bolaji
Bolaji
Feb 28, 2018 · 3 min read

One of the things that irk software developers is having to repeat oneself. As such, mantras like DRY and tools that automate repetition are quite popular”. Sass mixins are one of those tools. They abstract lines of repetition from the developer, reducing it to one line of repetition “@include <mixin-name>”.

The DRY principle is aimed at reducing repetition of software patterns, replacing them with abstractions and several copies of the same data.

Image for post
Image for post
8

This principle also applies to Front-End developers and I’m going to show you how to leverage mixins to avoid repetition of styles.

What is SCSS?

Why SCSS and not CSS?

SASS adds lots of additional functionality to CSS like variables, nesting and more. SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand. What this means is that in the end, all your .scss are still converted to .css so the browser can understand.

Diving into Mixins

Think of it as taking the styles for an element and having a selector include the style into that element or any modifier of that particular element. For example, I have a button with certain styles say:

and I need to reuse this style in other buttons in separate components or pages for instance, instead of declaring these styles in multiple stylesheets, I can create a mixin such that the button styles is maintained in a single place, making them easy to update and keep consistent.

A mixin is like a function and can take in a parameter, we can also set default arguments similar to the way we’d do for a normal Javascript function.

An example of a mixin is shown below:

What I did above is to write a css function that given some arguments, will return similar styles. I ensured the background-color and color are passed down as arguments to the mixin so I can reuse. I also defined a default argument on line 13, which is why I didn’t need to always pass in a second argument.

@mixin button($color, $background: #e8e8e8) {

I used the mixin above to create a reusable button tag, that is used to depict different scenarios. I used the mixin to easily create three buttons:

  • Submit button with a purple background
  • Clear button with a grey background
  • Error button with a red background

You can check it out in the pen below: 👇👇👇👇

When the .scss with mixins gets transpiled down to plain .css, we get the following:

You can read more on mixins here and here.

DRY-ing your SCSS with @extend

An example is shown below:

I recreated the button styles I created earlier using extends instead of mixins, you can check this pen out to see it.

Thanks for reading.

Remember to like, share and comment. Gracias!

Backticks & Tildes

Distributed knowledge without borders

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store