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.
SASS | SCSS | |
Code block | Use indented syntax | Use brackets {} |
End property | No semicolons “;” | Use semicolons |
Mixins declaration | Use “=” | Use “@mixins” |
Mixins usage | Use “+” | Use “@include” |
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)
カテゴリー: