Organize your CSS and write it faster

Speed up CSS coding, increase your workflow and make it more organized using the preprocessor Sass!

In the previous episodes, we learned CSS basics and some advanced styling techniques and I think it’s time to get the most out of CSS and learn about its preprocessors.

Ok, now you may be wondering what the heck is that?

To keep it simple, CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. What are all these? We’ll talk about each of ‘em in just a minute, but basically they are ways to make our CSS code shorter and much more organized which would make designing easier and more efficient.

There are many CSS preprocessors to choose from, but during this lesson we’ll learn about Sass and our file extension will be .scss . Get VS code ready if you wanna follow along.

First we need to add an extension called “Live Sass Compiler”, this one will compile or translate our Sass code to CSS simply because browsers can’t understand Sass. It will generate a .css file from the .scss. If you prefer, you can also use a GUI application like Koala or Sass CLI instead of an extension.

Let’s start with some random HTML content:

index.html

Variables:

It’s a good practice to use variables in your code. For instance, if you want to apply the same color for many elements, you would store that color value in a variable, then just use the variable name wherever you want to apply that color. And it’s helpful when you want to update that color so you don’t have to change it every place you used it, you just need to change the variable value.

In Sass, to declare a variable, you start the name with $. In our page we have two buttons, let’s give them the same color:

style.scss

This is not the greatest feature in Sass, in fact, CSS has variables of its own but I find Sass’s more practical.

Nesting Selector:

If we wanna style our contact infos section we would use this CSS:

style.css

What if we can make that clearer visually? Well in Sass we can do the following:

style.scss

I like this feature, my eyes won’t get confused when I am reading the code. I find this cool, isn’t it?

@import directive:

When we have too much content to style, we risk that our CSS file will be so large. With Sass we can move blocks of code and put it in separate files and then we just import those files.

Let’s move what we just added to another file called ‘_contact.scss’, keep in mind that the underscore ‘_’ is needed. Now we import it to our main style.scss file using:

|@import 'contact';

When our Sass is compiled, the block of code we just moved will take exactly the import statement place in the page. This is important when it comes to the cascading order.

Mixins:

Mixins allow us to define styles that can be re-used throughout our stylesheet. So if you wanna apply the same styling for many elements, using a mixin is a good idea.

Let’s say we want to perfectly (horizontally and vertically) center our content, we do that like so:

So, we define the mixin using ‘@mixin mixinName{}’ and then we include it using ‘@include mixinName()’ wherever we need to apply the same style. You get the idea!

There is another cool feature with mixins, we can give a mixin some parameters. Let’s say we wanna specify the flex direction each time we wanna use our mixin, we do that like so :

We give the value we want ‘@include mixinName(value)’ , then we use it at ‘@mixin mixinName($variableName)’.

In our example, ‘$direction’ will be replaced with ‘column’. And if we want to apply the same style but with a row flex direction we’ll use:

|@include centerPerfectly(row);

Inheritance Selector:

There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. That’s a case where Inheritance is quite handy.

Let’s say we have an .error class and we wanna give it the following styles

|.error{
  background-color: red;
  color: white;
}

and we have a more serious error class .error-serious , we would give this one the same styling as .error but we would maybe also make it bigger, so we can use:

|.error-serious{
    @extend .error;
    font-size: 50px;
}

So yeah use @extend when you need to inherit from another selector.

Extends or Mixins?

Extends and mixins are both ways of encapsulating and re-using styles in Sass, which naturally raises the question of when to use which one. Mixins are obviously necessary when you need to configure the styles using parameters, but what if they’re just a chunk of styles?

As a rule of thumb, extends are the best option when you’re expressing a relationship between semantic classes (or other semantic selectors). Because an element with class .error-serious is an error, it makes sense for it to extend .error. But for non-semantic collections of styles, writing a mixin can avoid cascade headaches and make it easier to configure down the line.

Congrats! you finished learning how you can make CSS more fun and organize your code. I hope you enjoyed it and if you wanna go further, feel free to visit the Sass official website.

Thank you for reading, seeya in the next episodes! 😄