How to SCSS
Tags: css, scss, sass, react
Published: 2019-07-01 16:06:29

---
title: How to SCSS
published: true
tags: css,scss,sass,react
canonical_url: https://medium.com/@robghchen/how-to-scss-59d5adbad601
---

Learn SCSS features with simple create-react-app

[![](https://cdn-images-1.medium.com/max/1600/1*Ds9dmDmQOBLi6A5xSyE1AA.png)](https://medium.com/@robghchen/how-to-scss-59d5adbad601?source=rss-1a2b6738cba4------2)

1) In terminal:
```
create-react-app scss-demo
cd scss-demo
npm i node-sass
npm start
```

2) Rename `App.css` to `App.scss`

3) In `App.js`, on line 3 change `import './App.css';` to `import 'App.scss';`

4) Take a look at `App.scss`, then replace the code in `App.scss` with this:

Notice in the following scss code that we can:
**a) Make variables with the $ symbol**
**b) Have nested element tags that reflect our HTML hierarchy**

{% gist https://gist.github.com/robghchen/af53864d07bb99a9e28f8f31488edc90 %}

This should look exactly like the create-react-app default page like what we’re used to seeing.

5) Let’s say we want to make the “Edit src/App.js and save to reload.” bold for mobile devices. This is a good opportunity to show you how to import another .scss file. This helps us separate responsibilities and keep our scss organized. In terminal:
```
touch /src/_mobile.scss
open /src/_mobile.scss
```

6) In `_mobile.scss`:

{% gist https://gist.github.com/robghchen/b10bf5da3b63a4d3efa1a0f8d3f9cc96 %}

7) Add `@import 'mobile'`; to the top of `App.scss`

8) We can even **make functions in scss**, add the following code to `App.scss` before your element selectors:

{% gist https://gist.github.com/robghchen/a5a75d23bdfa18a50d29b277aa2eea5d %}

9) In `App.scss`, within `.App-link` selector, add `@include grow(2em)`, it should look like this:

{% gist https://gist.github.com/robghchen/61c014d3624c94e6efaca2d7ee86ad5b %}

Try changing the 2em argument.

10) To show you how to use classes in scss, let’s add a `ul` tag and an `ol` tag in our jsx. In `App.js`, within `<header>` and after `<a>` tag:

{% gist https://gist.github.com/robghchen/077fb5fd422680b94bee58b88c87da42 %} 

11) Now back to `App.scss`, under the `grow` function, we’re going to **write a class**:

{% gist https://gist.github.com/robghchen/4d7dbae5409ec10854722346cfe39c11 %}

12) Let’s use our `%list-item` class. Within `.App-header` selector, under `.App-link` selector, add the following code:

{% gist https://gist.github.com/robghchen/4e1d6245ee0c50505833e368d11be076 %}

13) In our `%list-item` class, let’s multiply `padding: 0.5em` by `2`.

{% gist https://gist.github.com/robghchen/683234458eff9553818b1a1d38b57a44 %}

Weird, that’s not a thing in normal css, but try it yourself and rejoice! These are the basic superpowers that you gain from using scss. There are even more powerful features, but let’s wrap for now. Enjoy your newfound abilities!

<hr />

In case you want to see the final code for this tutorial, here is `App.js`:

{% gist https://gist.github.com/robghchen/1be76ea90a694a6331ac1481ab7050e4 %}

Here is `App.scss`:

{% gist https://gist.github.com/robghchen/6a9ba4e731f635da864cb78cca61e214 %}

---

Bring your friends and come learn JavaScript in a fun never before seen way! [waddlegame.com](https://waddlegame.com)