Integrating Sass Into React Application

What is Sass?

Sass is a programming language that utilizes preprocessor scripting that is complied and interpreted into Cascading Style Sheets (CSS). Sass consists of two syntaxes, “the indented syntax” which uses indentation to separate code blocks and newline characters to separate rules. The more readily used Sass syntax and that which will be using for the duration of this demo is “SCSS” which is called sassy CSS. This uses the style syntax styling of CSS with blocks of code being separated by semicolons within different brackets.

Sass Background

The implementation and creation of Sass was initially designed by American computer programmer, author, and gay rights advocate Hampton Catlin and developed by Natalie Weizenbaum. Sass was integrated and utilized in multiple programming languages since its creation. The original Sass integration was created in 2006 and utilized in the original open-source Ruby implementation. Shortly after, Sass script began being implemented into other languages such as Dart, C++. PHP, and Javascript.

Adding Sass To React Application

Let’s begin by creating a react application for the purposes of the demo. We will use the following command to generate a new React application:

Now that we have generated our react application, we need to install Sass directly into our package.json file. We will do this by running the following command:

• npm install -save node-sass command

We currently have access to an App.css file that is being imported directly into our React application. We want to change the name of this file to App.scss to utilize Sassy CSS or the sass script implementation of cascading style sheets. We must also change the import in our App.js file to reflect the change.

We can now utilize the Sass CSS convention to implement styling into our React profile! Lets try it out. At the top of our App.scss file, add the following line of code:

$myColor : #C0C6C84;

Let’s utilize this color to style one document’s background-color

Tada! Sass allows us to add a plethora of customizable styling components to our CSS file. These are some of the ways in which we can implement this type of styling.

Fonts: We can create custom fonts to be used in our SCSS styling sheet via implementing the following line of code:

$my-font: helvetica, san-serif; — we can essentially call the “my-font” variable anything that we deem is relevant to our styling component.

Nesting with Sass

Another feature that can be utilized to style our components in Sass syntax is nesting. For example, we have the following two divs:

The second div is a child of the first div, which means that any styling implemented on the first div will in turn affect the second div. Sass allows us to nest class elements to achieve the same effect as CSS. The advantage to styling elements in this way is organization of code, DRY implementation, and inheritance. We can style the second div in the following way:

Another way in which Sass allows us to extend inheritance is through the utilization of the @extend scss keyword.

This will allow our message classes to inherit the styling of the my-message class just like that! This can be utilized through multiple classes and a class can extend multiple others, if styling does not conflict or overlap.

Why You Should Use SASS!

All and all, Sass is an easy and effective tool to utilize and learn in order to write easy-to-read, customizable styling code. Sass includes various other properties that allow us to customize our styling sheet in order to obtain a DRY and reusable code flow within our styling sheets. There are many advantages to implementing Sass in your React application as various technology and design companies utilize Sass script and it’s derivatives.