Getting started with Sass in React.js — part 2

Extracting reusable code

@mixin center{
display: flex;
align-items: center;
justify-content: center;
}
.outer{
background-color: teal;
width: 500px;
height: 500px;
@include center;
}

Variables in Sass

$mainWidth: 500px;
$primaryBgColor: teal;
.outer{
background-color: $primaryBgColor;
width: $mainWidth;
//...

Splitting code into separate files and Importing in Sass

@import "./mixins.scss";
@import "./variables.scss";

--

--

--

React dev.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

20+ Useful Latvian Verbs You Should Know

Microservice Approach for Web Development — Micro Frontends

Sorting Algorithms, Part 1

Building custom Docker images from cypress/included

Final WIP

Amazon Lightsail to the rescue

NAMED EXPORT AND EXPORT DEFAULT IN ES6.

Talk Nerdy To Me: React

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
Ali Toshmatov

Ali Toshmatov

React dev.

More from Medium

Working on my Final for Phase 1

How to make a light and dark mode button in HTML, CSS, and JS!

React Components – Props and States in ReactJS with Examples

Different Ways to center a div