How to SCSS

Learn SCSS features with simple create-react-app

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

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:

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:

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

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:

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

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

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

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!

---

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

Here is App.scss:

---

Bring your friends and come learn JavaScript in a fun never before seen way! waddlegame.com