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:

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:

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.

Software Engineer focused on Full Stack development with MERN stack and Ruby experience. Interested in sharing my learning journey with aspiring developers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store