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