Getting started with Sass in React — part 1

Setup in React

npm i node-sass
import React from 'react';
import './style.scss';
const SomeComp = () => {
return (
<div className="outer">
<div className="inner">Hello world</div>
</div>
);
};
export default SomeComp;
.outer{
background-color: teal;
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}

Nesting, or parent-child relation

.outer .inner {
/* Some styles */
}
.outer{
background-color: teal;
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
.inner{
font-size: 46px;
color: white;
font-family: sans-serif;
}
}

Pseudo-class and pseudo-element

//...
.inner{
font-size: 46px;
color: white;
font-family: sans-serif;
transition: .3s ease-in-out margin-bottom;
&:hover{
margin-bottom: 10px;
}
&::before{
content: "\2713";
}
}
//...

--

--

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