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
Top comments (0)