Using SASS To Level Up Your CSS

React.js is a front-end JavaScript framework popular in the developer world. Arguably, it’s the most popular one there is. One of the reasons why it is so popular is because of the productive approach to building a variety of of web applications that it offers. Developed by Facebook, React is designed specifically with the end user experience in mind from a social media platform’s perspective. However, if you’re anything like me, you still find yourself struggling to write effective CSS and deliver the user experience that you want to. In my own attempts to step up my CSS game, I’ve stumbled upon Sass, and I want to share the superpowers that it gave me with you so that you too can develop amazing front-ends for your applications.

Sass

Sass is a React library that contains a number of amazingly useful and easy-to-use features. All of them are there to help you write better, more organized, easier to read CSS.

Why Use Sass?

Sass stands for Syntactically Awesome Style Sheets, and it lives up to that name. Sass allows you to use things like variables, nested rules, and inheritance. Overall, it allows you to keep things organized and create your style sheets faster.

Setting Sass Up

To get Sass up and running on your project, you will need to run npm install node-sass or yarn add node-sass, depending on which package manager you prefer.

After that, the only thing that you need to do is make sure that all of your CSS files have the extension .scss or .sass and update your imports to match. Once you have that taken care of, you are free to use all of Sass’s functionality in your code!

Basic Functions of Sass

The first feature that Sass provides to you is the ability to use variables in your style sheets.

Think of variables as a convenient way to store information that you will use multiple times throughout your sheet. Sass allows you to define them a single time and then continue to reference them as many times as your heart desires. Writing good variable names will also help to make your style sheet more readable.

The second thing that Sass lets you do is nest your styling.

As you can see here, Sass gives you the option to have your more specific styling needs nested inside the general elements they fall under. You’ll notice that it looks more like HTML than CSS, and that’s because HTML also has the ability for you to nest elements whereas traditional CSS does not. This helps you keep related styles close to each other and order them in a logical way that makes it easier for an outside viewer to track what is going on in your style sheet.

The last function of Sass that we will talk about, and perhaps the most useful one, is the ability to extend/inherit different styles.

With Sass, you can create preset pseudo-classes that you can later extend in child elements. In the same way that objects inherit properties from their parent class, these elements inherit everything from the style that they extend. You can then add new styles to them to set each one apart from the others and give them the unique properties that you only want some of them to have.

Go Forth And Style

I hope that you are as emboldened by the power of Sass as I was. As a developer, there are always more tools out there for you to discover, and all of them are intended to make your life easier and to give you more awesome power as a programmer. Thank you for reading this article, and if you liked it, remember to come back next week for another great post.