Next.js supports various styling options, including Sass, which allows for more advanced styling techniques like variables, nested rules, and mixins. Integrating Sass into a Next.js project enhances your styling capabilities and makes managing styles more efficient and maintainable.

In this article, we will learn how to use Sass with next.js

What is Sass?

Sass stands for Syntactically Awesome Style Sheets. It is a powerful preprocessor scripting language that extends CSS with features like variables, nesting, mixins, and more. It follows a structured approach to writing stylesheets that makes CSS code more maintainable and scalable.

How to use Sass in Next.js?

To use Sass in Next.js, install the sass package, create Sass files with .scss extensions, and import these files into your _app.js or components. This setup allows you to leverage advanced Sass features for efficient styling management.

You can install it using the following command and create a file with the extension of .scss (e.g., global.scss)

npm install --save-dev sass

Syntax:

// Navigation bar styles
.navigation {
    background-color: #333;
    padding: 1rem;

    // List styles
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        // List item styles
        li {
            display: inline-block;
            margin-right: 1rem;

            // Anchor styles
            a {
                color: white;
                text-decoration: none;
                padding: 0.5rem 1rem;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

Steps to Configure Sass in Next.js Project

Step 1: Create a Next.js application using the following command.

npx create-next-app@latest gfg

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes

Step 3: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Step 4: Install the Sass module.

npm install --save-dev sass

Project Structure:

The updated dependencies in package.json will look like this:

"dependencies": {
    "next": "14.1.4",
    "react": "^18",
    "react-dom": "^18",
    "sass": "^1.72.0"
}

Example: The below example demonstrates the use of Sass in Next.js

/* File path: src/app/style.scss */

:root {
    --primary-color: rgb(6, 6, 92);
}

h1 {
    color: green;
}

.container {
    display: flex;
    align-items: center;
    padding: 0px 5px;
    gap: 10px;

    .box {
        height: 150px;
        width: 150px;
        background-color: var(--primary-color);
    }

    .btnGroup {
        display: flex;
        gap: 5px;

        button {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            color: white;
            font-weight: bold;
        }

        button:hover {
            background-color: rgba(0, 0, 0, 0.977) !important;
        }

        #red {
            background-color: red;
        }

        #green {
            background-color: green;
        }

        #blue {
            background-color: blue;
        }
    }
}

//File path: src/app/page.js
'use client';
import { useRef } from "react";

export default function Home() {
    const box = useRef(null)
    const ChangeColor = (color) => {
        box.current.style.backgroundColor = color;
    };

    return (
        <>
            <h1>GeeksForGeeks | Sass in Next.js </h1>
            <div className="container">
                <div className="box" ref={box}></div>
                <div className="btnGroup">
                    <button id="red"
                        onClick={() => ChangeColor('red')}>
                        Red
                    </button>
                    <button id="green" className="green"
                        onClick={() => ChangeColor('green')}>
                        Green
                    </button>
                    <button id="blue" className="blue"
                        onClick={() => ChangeColor('blue')}>
                        Blue
                    </button>
                </div>
            </div>
        </>
    );
}

To run the Application open the terminal in the project folder and enter the following command:

npm run dev

Output:

Conclusion

Integrating Sass with Next.js enhances your styling workflow by providing advanced features like variables, nesting, and mixins. By installing Sass, creating Sass files, and importing them into your project, you can manage styles more efficiently and maintain a cleaner codebase.