What is Sass? Styling React with Sass CSS

Sass stands for "Syntactically awesome style sheets". It is an extension to CSS. Before I talk about Sass, let me go back a little bit to understand what Frontend development is. Browsers understand three concepts HTML, CSS, and JavaScript. If you write static websites, you use HTML. Pure HTML will create websites, similar to a document. You bring HTML websites to life using CSS (Cascading Style Sheets). This is where you add a background, tables, animations ... If you want to make your site dynamic, you may use JavaScript (specifically ES5). So, if you only know those three languages (HTML, CSS, and JavaScript), you can build a very good webpage. You might ask the question, why then do we have all those confusing other languages and technologies such as TypeScript, Babel, React, Vue, Angular, Sass, CSS Modules, Less ... Just to put it in simple words, all of those are compilers to compile to the three main languages (HTML, CSS, and JavaScript ES5). Each one of them came to help to solve a problem or make it easier to write things. Similar to machine language in the old days. They used to tell us at school that computers only understand Zeros and ones. All those languages will be translated to Zeros and Ones. The same for Browsers. Browsers only understand (HTML, CSS, and JavaScript ES5). Therefore, all those are just compilers and libraries to make development richer. For example, TypeScript adds types to Javascript but it compiles to JavaScript ES5 at the end for Browsers to understand.

Back to Sass. Sass is an extension to CSS that enables users to use variables, inline imports, nested rules, and other things as we will discuss further.

As usual, I like to explain things in action. So, let's start using Sass in a new project.

If you have never developed node or React, please refer to the following article to set up your machine

Now let's create a new project and call it react-sass and open it in Visual studio code as follows: (final project at https://github.com/ranyelhousieny/react-sass)

npx create-react-app react-sass

cd react-sass

code .

1. When you open Visual Studio Code, open a terminal using (Ctrl + `) see the image to the left.

2. Install node-sass

npm install -save node-sass

3. rename src/App.css and src/index.css to src/App.scss and src/index.scss

4. Change the imports in both index.js and App.js to reflect the new extensions

now run npm start and watch the page on the Browser

npm start

Install VSCode extensions for Sass

You may install the following extensions to help format Sass

https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented

First Sass feature (Variables)

let's use the first Sass feature, which is using variables. Go to Ap.scss define a variable called headerBackgroundColor and its value to Orange. Change the current value in .App-header to this value, as follows

$headerBackgroundColor: rgb(
  93.3%,
  78.5%,
  6.9%

);

Save the file and watch the browser. Check the browser

This is one of the benefits of Sass that you can have variable names for things you may use across your project and keep referring to them. I usually have a primary and a secondary color that I use across my page to keep the feel and look the same.

Nesting

One of the things in CSS that you have to repeat header names to create an effect like hover or for nested classes. In Sass you can just nest them as follows

in App.scss you have the following class

Now let's change the background color on hover as follows:

So, now when you hover, it will change from orange to blue as follows:

In CSS, you would have done in a separate class, as follows: