How to set up and use SCSS/SASS with NextJS

This post will help you to add a CSS preprocessor library to the React NextJS project. It will make you write CSS more efficiently.

Introduction

SASS (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or compiled into CSS. You can write your stylesheet with SCSS or SASS syntax.
SCSS: It has the same syntax as CSS with some extensions.
SASS: It has a loose syntax. It does not use semicolons and has a lot of white space.
Depending on developer style, she/he can choose between SCSS and SASS. SASS is practically faster to write.

Installing

You will need to create your NextJS project first. In this post we will use normal CSS so you don’t need to select Tailwind CSS .
Create NextJS project:

npx create-next-app@latest

or

yarn create next-app

Add SASS library:

npm install -S sass

or

yarn add sass

After installing SASS, you can now change file extension to SCSS or SASS. Different file extensions will have different coding syntaxes. I will use SCSS in this post.

SCSS syntax and function

Below are differences between SCSS and SASS. Others are the same as normal CSS.

Variable declaration

You can use “$” to declare variables and then later use them as property. Variables can be overwritten. So be careful with them.

$my_black: #000005;
$my_border: 1px solid #00DF2D;
$my-shadow: 1px 1px 2px 0px #2F2F2F33;

.my-title {
  color: $my_black;
  font-size: 12px;
  border: $my_border;
  box-shadow: $my-shadow;
}

Mixins

We can declare a set of properties and then use it in a place which needs a similar style.

@mixin my-caption {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
}

.caption-red {
  @include my-caption;
  color: red;
}

.caption-blue {
  @include my-caption;
  color: blue;
}

Parent selector

This is my favorite feature. I only need to use “&” to represent the parent name. With normal CSS you have to write the name a lot. This feature helps me to select child elements easily.

.my-button {
  padding: 20px 40px;

  //<element class="my-button red">
  // equal to .my-button.red
  &.red {
    color: red;
  }

  //<element class="my-button">
  //<element class="text">
  // equal to .my-button > .text
  & > .text {
    @include my-caption;
  }

  //<element class="my-button" :hover>
  // equal to .my-button:hover
  &:hover {
    color: skyblue;
  }
}

Import

You can import other stylesheet files and use declared variables.

Summary

You may wonder why we are still using normal CSS when we have many frameworks like Material UI or Tailwind CSS . These frameworks have their own configuration and usage. They are also heavy to build and run in development mode. I found that it was hard to customize code to match my project requirements. With your own CSS, you have absolute control over styling and reduced build/run time. When combined, SASS enhances your development process by enabling modular, maintainable, and scalable CSS.

References:
Sass: Syntactically Awesome Style Sheets (sass-lang.com)
Styling: Sass | Next.js (nextjs.org)