Learn To Improve Your Code With SASS

Front-End | 22th November 2017

Sass is a CSS extension, which emerged in the last decade, which allows you to extend the potential of it, through a range of new tools - variables, nested rules, inline imports, mixins, placeholders, among others - allowing you to keep the stylesheet organized while easy to maintain. It is also capable of being easily adapted to components and patterns systems, such as, for example, Atomic Design.

Despite its growing popularity, it is perhaps reduced the percentage of developers to take full advantage of its features. But even more significant, there’s even less of those who are concerned with how the Sass is compiled to CSS, something that should not be overlooked, if you want to keep your code light and clean for the browser.

In this sense, this article will deal with two of its most useful features - mixins and placeholders. What they are, and what distinguishes them from each other. In general, both are tools that allow you to "store" blocks of code, reusable whenever necessary. The main differences are in the type of code that can be stored in each one, as well as disparities in how they compile for CSS, and how it can, and should, influence your decision to use one, over the other (or, even, use them simultaneously ...)

Keep your code light and clean with SASS

Mixins


The mixins are a directive that will allow you to set different CSS properties, as well as make them dependent on arguments and functions, using them though the syntax "@include mixin ();". For example, if you use several times the properties "display:block" and "margin: auto", you can create something like this:

Mixins code

Then, just include the mixin, whenever necessary:

Different CSS properties

This will compile to the following CSS

Compiled Mixins CSS

Wow! So simple, the work that this will save you, not having to write these properties dozens of times! It's amazing, isn’t it?

No.

This example I gave, is precisely how you shouldn't use mixins, and one of the most usual errors. The problem is that, whenever they are used, they duplicate and repeat the code, thus going against one of the most famous good practices - DRY (Don’t Repeat Yourself).

Well, then, when should you use them? When their properties are not static, but dependent from variables or functions, by making use of "()", whose presence in the example above, it’s totally unnecessary. Taking a simple example, you could create a mixin to change the "background-color", "border" and "color":

Different variables or functions

This will compile the following CSS:

Example of a CSS code

In such cases, the use of mixins is fully justified, even an example as simple as the one shown here! Its use becomes even more interesting, if you start increasing its complexity by mixing it (Ha! ... sorry) with other features, or even with other mixins!

If we are gonna perform Inception, then we need imagination.

Eames, in Inception (2010)

But let's look at this further. First, let's focus our attention on the placeholders!

Placeholders


Remember the example I gave in the beginning, of a mixin used incorrectly? Good, because it is in this kind of cases we should use placeholders instead. These act as classes, defined with the prefix "%", with the particularity that are not compiled for CSS. For example:
 

Example of Placeholders

Ok, the placeholder is created and defined, what now? Well, it is here that the directive "@extend" enters (usually used to extend css properties to a class), and the reason that makes them more useful in these cases, instead of mixins.

Extended CSS properties

This will compile the following CSS:

Compiled Placeholder code

Instead of adding the properties to each class, it attaches and groups the selectors with common properties. I know, the example I provided doesn’t create a very impressive visual impact. But as you can imagine, multiply this example throughout the code in a style.css file (or several), and the differences would be very significant.

However, despite this feature being an advantage in these cases, the directive "@extend" has a problem - can not be used in media-queries. The fact that the selectors with the same properties are grouped, removes them from the context in which they might have been (in this case, the Query). There are ways around this, but in fact they are hacks and, therefore, somewhat inelegant to use repeatedly.1
 
1. See "Placeholder’s hack” in Resources, at the end of the article.

SASS - Mixins & Placeholders

 

"It's time for the Jedi to end ..."

Luke Skywalker, in The Last Jedi (2017)

It is not necessary for you to come from a very distant galaxy, to perceive that the ideal situation is to achieve a "balance in the force". In this case, wherever possible or appropriate, you should look for opportunities to mix the use of mixins and placeholders.

Taking advantage of the examples shown before, you can simply join them in a single mixin, making your code more efficient:

Make Your Code More Efficient

In this case, the compiled CSS will be as follows:

Compiled SASS Code

Concluding Remarks


In conclusion, as general rules, when should you use one of these:
* You must use placeholders wherever possible, as they compile less CSS.

* If the properties aren´t static, uses mixins.

* If there are mixins, try to incorporate placeholders or other mixins in them, whenever appropriate and/ or useful.

Although the examples suggested here are very simple, it’s easy to perceive the vast possibilities of these features. And remember, it will always be essential to perform a filter and evaluation of the type of mixins and placeholders that will be useful in each project, if any at all.

If you want to expand your knowledge about this subject, feel free to check the suggested links in Resources, and to keep following our updates!

Front-End Development

Resources:

Andy.scss - an open-source collection of useful SASS mixins.

Repository Hugo Giraudel

Placeholder's hack

Sass Documentation
 

Bibliographical reference:

Johnson, R. (director). (2017). Star Wars: The Last Jedi.USA: Walt Disney Pictures.
Nolan, C. (director). (2010). Inception. USA: Warner Bros.
 

Read more about what is Front-End >>

Get fresh content about Front-End every month!

 
Back