Learn SCSS features with simple create-react-app

  1. In terminal:

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:

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 thegrow 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:

If you enjoyed that, check out my latest series: Imagine if Codecademy and Clash Royale made a baby

You can also find me on Youtube and Twitch

Software Engineer

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