Keeping your SCSS DRY
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.
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?
SCSS stands for Sassy CSS and is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser.
Why SCSS and not CSS?
CSS is the styling language that your browser understands and uses to style webpages. SCSS is a special file type and syntax type for SASS, a program originally written in Ruby (via libsass) that assembles CSS style sheets for a browser, now written in node as node-sass.
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
One of the most-loved feature of the SCSS is the mixin, an abstraction of a common pattern into a semantic and reusable chunk.
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
Another feature of SCSS you can use for DRY-ing up your style is the extend concept. It is used via the @extend attribute available in SASS. This directive allows two different selectors have similar styles. Unlike mixins, extends cannot be given arguments; it is an all-or-nothing deal.
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!
