Sass in React

Introduction

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor, which adds special features such as variables, nested rules, and mixins into regular CSS.

Goals

• Create a folder structure for SASS in a React project
• Learn to set up SASS in a React project
• Learn to use mixins in SASS
• Learn to use variables in SASS
• Learn to use nesting in SASS

Basic Tools

Sass documentation

Contents

Install Sass in your React project

To use Sass in your react project you need to install the sass package. You can do this by running the following command in your terminal.

Copy
npm i sass

Folder structure

This is a typical folder structure for a React project with Sass. All the necessary files to use sass will be saved in a styles folder in the src folder.

Copy
/my-app
|-- node_modules/
|-- public/
|   |-- index.html
|   |-- favicon.ico
|-- src/
|   |-- components/
|   |   |-- App.js
|   |   |-- Header.js
|   |   |-- Footer.js
|   |-- styles/
|   |   |-- components/
|   |   |   |-- _Contact.scss
|   |   |   |-- _Footer.scss
|   |   |   |-- _Header.scss 
|   |   |   |-- _Home.scss
|   |   |   |-- _Main.scss
|   |   |   |-- _NavBar.scss
|   |   |   |-- _Footer.scss
|   |   |-- utils/
|   |   |   |-- _mixins.scss
|   |   |   |-- _variables.scss
|   |   |-- style.scss
|   |-- index.js
|-- package.json
|-- .gitignore

the components folder will contain partials for each component of the application (note that partial files start with _). The utils folder will contain mixins.scss and variables.scss. The index, style.scss file will import variables, mixins and components partials.

Copy
// Variables
@import './utils/variables';

// Mixins
@import './utils/mixins';

// Base styles
@import './base/reset';
@import './base/typography';

// Component styles
@import './components/NavBar';
@import './components/Header';
@import './components/Footer';
// ... import other component styles as needed

components

We will create a partial file for each component (starting with _) of the application and will give a class to the uppermost parent element of the component to apply the styles. Then we can use compound or nested selectors to style the elements inside the component.

/styles/components/_NavBar.scss

Copy
.nav-bar {
  background-color: #333;
  overflow: hidden;

  li {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

    &:hover {
      background-color: #ddd;
      color: black;
    }
  }
}

Then add the class to the component in the JSX file.

src/components/NavBar.jsx

Copy
import React from 'react';
import './NavBar.scss'; // Assuming you have a NavBar.scss file in the same directory

const NavBar = () => {
  return (
    <nav className="nav-bar">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  );
};

export default NavBar;

Remember to import your partials in the style.scss file!

More on nesting in Sass here

mixins

Mixins in Sass are a way of reusing a group of CSS declarations multiple times throughout your stylesheet.

You can declare a mixins like this:

/styles/utils/mixins.scss

Copy
@mixin center-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

You can then use the @include keyword to reuse that block of code.

/styles/components/_component.scss

Copy
@import '../utils/mixins.scss';

.box { 
    @include center-content; //centers box content
    border: 1px solid black;
    }

Mixins also allow to receive arguments. More on mixins

variables

Variables are a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse.

This makes your code reusable, so if you want to change the color of several rules you can just change the variable value. Sass uses the $ symbol to make something a variable, used on the left side of the colon declares a variable name, used on the right calls its value.

/styles/utils/variables.scss

Copy
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Link Sass to your React project

in index.jsx, import the style.scss file. Remove the old css import.

Copy
import React from 'react';
import ReactDOM from 'react-dom/client';
//import './index.css';
import './styles/style.scss';//Add this line
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Exercises

• Add SASS to your React project.
• Create a folder structure for SASS in a React project.
• Style your app with sass.