Using SCSS && CSS variables in React

Using variables allows you not to remember the «magic» numbers of each value, just declare the variable once and use it throughout the project. This will help in the future, when it will be necessary to change some value, then we will do it in only one place. We can say that this is a CSS on small steroids.

There are two approaches to organizing variables: using SASS (SCSS) and inline CSS variables. We will see both, they are conveniently compatible in the React project. This is my experience that I applied in one of the projects and, as it seems to me, it is convenient. Check out CSS variable support on caniuse (hope you don't have to work with IE11 😅).

Let's start with an empty sheet, but in order not to configure Webpack from scratch, we will use a very popular solution — create-react-app. In the console, execute the command:

npx create-react-app my-app

Wait until everything is installed, then go to the project folder and use npm or yarn to install a new dependency for working with SASS and SCSS-syntax.

yarn add node-sass

The last and most boring 😒 thing remained of the preparatory phase: we rename all .css files to .scss, do not forget to update the import of these files in the components themselves.

Everything is behind, we are launching the project, our project should open without errors, but so far there are no changes in it either.

yarn start

Now for the fun part. To work with variables, I create a separate folder in the src directory, call it design-tokens. In this folder we create two files: _scss-variables.scss and css-variables.scss. As a result, the structure of the project should look something like the screenshot below.

Excellent! Do not forget to import these two files into one of the root components, I will have index.scss.

@import "./design-tokens/scss-variables.scss";
@import "./design-tokens/css-variables.scss";

Most of the path has been covered, very little remains: create variables and understand how to use them. Let's start with the creation.

A frequent question that arises for those who begin to use variables: what to put into variables, what values ​​and what properties? And there is no definite answer, it all depends on your and team preferences. I can give advice that will give understanding at the initial stage: create color variables, font sizes and names, line-height. This will be enough and save a lot of time in the future.

Let's start by creating CSS variables first, for this we’ll go to the css-variables.scss file and create a «root» selector, which will later help us use the variables throughout the project. For example, I will make the color variables of the flag of Germany, in order to further use them as the main color scheme in the project.

:root {
  --color-primary: #000000;
  --color-secondary: #DD0000;
  --color-additional: #FFCE00;
}

Notice how the variables are called. I could name them --color-black, --color-yellow and so on, but what if the designer of our project comes and says that now we will use orange instead of yellow? Try to name variables abstractly so that they are responsible for their purpose, rather than expressing a specific entity (for example, a specific yellow color).

We are done with CSS variables, now you can go into any component styles file and use them. Perhaps I will change the background-color of the App component in the App.scss file.

.App-header {
  background-color: var(--color-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Wonderful! Now write variables this way throughout the project.

The question remains: why do we need the _scss-variables.scss file and how to use it? For myself, I found a solution that I use SCSS variables for indentation and media-queries, since I use them less often and not in all components. For example, in the file, create several variables for margins and paddings.

$spacer-xs: 4px;
$spacer-s: 8px;
$spacer-m: 12px;
$spacer-l: 17px;
$spacer-xl: 28px;

The syntax is slightly different, but the essence is the same, we declared five variables with specific values ​​in pixels. Unlike CSS variables, they are not globally accessible and need to be imported into each file in which we want to use. Import is similar to CSS syntax, I will create the components folder, inside which is the Card folder, where I will add the Card.scss file. I import variables inside this file. Now I can use both types of variables in one file, which I will do.

@import "../../design-tokens/scss-variables.scss";

.card {
  background-color: var(--color-secondary);
  margin: $spacer-m;
}

Now we have two types of variables that we can use throughout the project and quickly override if necessary. Create, invent new and practice in consolidating the acquired skills, I wish you all productive work!