Become a Sass Master

When I first started learning CSS I always thought that there must be an easier way of doing some things. I noticed there’s a lot of duplicate code in CSS, and in larger projects code just becomes messy and very hard to maintain. Well, when I first heard about Sass most of my wishes were fulfilled. No more redundant repeatable code, operators on the fly, and the best feature - nesting. In this blog we’ll look into all of the features and I will show you some examples as well. Let’s get into it.

Preprocessing

Let’s just get this out of the way before I show you some code. Sass is a preprocessor which means Sass code gets saved as vanilla CSS so browsers can read it. It does need some configuring, but it is fairly straight forward.

Partials & modules

Partials and modules go hand in hand. Partials are just files which contain a part of code which you then import into your main sass file. For example a navigation partial file could be called _navigation.scss. As you can see here the partial files start with _ and this is just a convention and is not required.

Making partials helps your code stay cleaner and leaner. This is the example of folder structure in one of my projects. Each folder contains partials that are then imported into the main file.

In my case I went with 5 folder structure, although, there is a 7 folder structure which is also widely used.

Let’s look at the main.scss file. This file is not a partial, but it is the main file in which we import all the partials/modules and then process them into vanilla CSS. This file should only have imports and nothing else.

Variables

Variables look similar to any other programming language, you define a name for a variable and a value which mostly consist of colors, font sizes and so on. The best thing about variables is if you use variables in all your components then you can change the value in one place and all the components will update to the new value.

Vanilla CSS also has variables out of the box, but they are not supported in some browsers. Bootstrap5 still uses Sass variables for that reason. Let’s look at a comparison between vanilla CSS and Sass variables.

It is clear that Sass variables are just way easier to write. I recommend you use CSS variables, but in case you need to support most browsers go with Sass variables since there’s really not a big difference.

Nesting

Let’s talk about one of the most interesting additions – nests. Nesting is quite hard to explain but it is very simple and intuitive. You can target child elements of an element by just adding them inside the selector.

Normally when you directly target an element like ul and change its style, all ul elements will inherit that style, but most of the time we don’t want that to happen so we can nest it inside a parent. In CSS the code would look like .navigation ul {…}, but here it is way more readable and maintainable. You can also nest deeper than one level just like the li is nested inside ul which is nested inside .navigation.

In this example you notice the symbol: &. This symbol is used to replace the need of reusing the parent class everywhere. For example if the parent class is called .card instead of writing card__header you can replace it with &__card, but it does need to be nested inside the .card class.

If we look at the button example we notice that we can also use pseudo classes with the & symbol which basically equates to .button:hover {…} since the & symbol just replaces the actual parent element class.

So why would you use nesting? Well, if you nest everything the code becomes so much readable and maintainable. I always use nesting and I think it is the best feature Sass has to offer and that it should be shipped with vanilla CSS.

Mixins

Another extremely useful tool that helps you write code once and then reuse it in your components. A mixin is written similarly to a function and it can also take in parameters.

A mixin requires a name in this case it is called ‘translate’. Parameters are not normally required, but since I wanted to make translations different every time I call them  I added variables instead of hard coding it. We call a mixin with @include not to be confused with the @import. In the example below you might notice that we already set the $x and $y variables to 50%, this is just in case we do not specify their value when including the mixin.

Mixins can also be called with dynamic properties.

When to use mixins? Whenever you have code you might need to replicate. A button for multiple colour support. Another good example is content cards. I had to make small and large cards which had the same design, so I just put width and height into a variable.

Nested Media Queries

If you’ve ever tried to make a responsive website you know it can be frustrating duplicating all the selectors multiple times at the bottom of the CSS file to override styles based on the screen width. With nested media queries you can simply add a media query inside the parent selector without even adding a selector. Sass is smart enough to realize you’re adding a media query on the selector in which it is nested.

Operators

The easiest for the last: operators. Operators work exactly like in programming language. CSS does come with basic operators but just like variables they are not supported in some browsers.

Conclusion

I highly recommend you try out Sass and play around with it. It is an amazing tool that really makes your code more readable and maintainable. This blog contains the basics to get you started and if you want to learn more check out the official Sass documentation which contains a bunch more stuff for you to learn.