Forem

Robert Chen
Robert Chen

Posted on • Originally published at Medium on

4 4

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
Enter fullscreen mode Exit fullscreen mode

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

// we can make variables!!! sweeeeeet!!
$bg-color: #282c34;
$link-color: #61dafb;
// look at these nested elements, beautiful just like your html
.App {
text-align: center;
.App-header {
background-color: $bg-color;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-link {
color: $link-color;
}
}
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
view raw App.scss hosted with ❤ by GitHub

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
Enter fullscreen mode Exit fullscreen mode

6) In _mobile.scss:

@media (max-width: 900px) {
.App-header {
p {
font-weight: 700;
}
}
}
view raw _mobile.scss hosted with ❤ by GitHub

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:

@mixin grow($size) {
font-size: $size;
}
view raw App.scss hosted with ❤ by GitHub

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

.App-link {
color: $link-color;
@include grow(2em);
}
view raw App.scss hosted with ❤ by GitHub

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:

<ul>
<li>Power</li>
<li>Of</li>
<li>SCSS</li>
</ul>
<ol>
<li>Don't</li>
<li>Repeat</li>
<li>Yourself</li>
</ol>
view raw App.js hosted with ❤ by GitHub

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

%list-item {
background-color: black;
text-align: left;
padding: 0.5em;
border: 1px solid white;
}
view raw App.scss hosted with ❤ by GitHub

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

ul {
li {
@extend %list-item
}
}
ol {
li {
@extend %list-item;
}
}
view raw App.scss hosted with ❤ by GitHub

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

padding: 0.5em * 2; // you can use math operators like +, -, *, /, and %.
view raw App.scss hosted with ❤ by GitHub

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:

import React from "react";
import logo from "./logo.svg";
import "./App.scss";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<ul>
<li>Power</li>
<li>Of</li>
<li>SCSS</li>
</ul>
<ol>
<li>Don't</li>
<li>Repeat</li>
<li>Yourself</li>
</ol>
</header>
</div>
);
}
export default App;
view raw App.js hosted with ❤ by GitHub

Here is App.scss:

@import "mobile";
// we can make variables!!! sweeeeeet!!
$bg-color: #282c34;
$link-color: #61dafb;
// we also make functions, amaaazzing!!
@mixin grow($size) {
font-size: $size;
}
// we can even make classes, so much power!!!
%list-item {
background-color: black;
text-align: left;
padding: 0.5em * 2; // you can use math operators like +, -, *, /, and %.
border: 1px solid white;
}
// look at these nested elements, beautiful just like your html
.App {
text-align: center;
.App-header {
background-color: $bg-color;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
.App-link {
color: $link-color;
@include grow(2em);
}
ul {
li {
@extend %list-item;
}
}
ol {
li {
@extend %list-item;
}
}
}
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
view raw App.scss hosted with ❤ by GitHub

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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more