How to use Sass

---

제목 (Title): Sass 사용 방법 (How to use Sass)
설명 (Description): Sass를 사용하여 Next.js 애플리케이션의 스타일을 꾸며보세요.
문서 주소 (URL): https://nextjs.org/docs/app/guides/sass
버전 (Version): 16.1.6
최근 업데이트 날짜 (Last Updated): 2026-02-27
선수 지식 (Prerequisites):

• 가이드 문서 (Guides)

---

안녕하세요! 오늘은 Next.js 환경에서 강력한 CSS 확장 언어인 Sass를 어떻게 사용하는지 공식 문서를 통해 차근차근 살펴보겠습니다. 번역뿐만 아니라 제가 실무와 강의를 하면서 느꼈던 팁들도 팍팍 넣어드릴 테니 끝까지 잘 따라와 주세요!

Next.js는 패키지만 설치해주면 .scss와 .sass 확장자를 사용하는 Sass 통합을 기본적으로 아주 잘 지원해요. 별도의 복잡한 웹팩(Webpack) 설정 없이도 말이죠. 게다가 CSS 모듈(CSS Modules) 기능과 결합해서 .module.scss나 .module.sass 확장자를 사용하면, 특정 컴포넌트에만 종속되는 컴포넌트 레벨의 Sass를 사용할 수 있답니다.

💡 강사 팁: 혼자서 완성도 높은 웹 애플리케이션(예를 들어, 다양한 기능을 갖춘 뷰어나 복잡한 UI가 들어가는 프로젝트 등)을 개발하다 보면 컴포넌트 개수가 훌쩍 늘어납니다. 이때 CSS 모듈(.module.scss)을 활용하시면 클래스 이름이 겹쳐서 UI가 망가지는 불상사를 원천 차단할 수 있어요. 코드의 응집도도 높아져서 나중에 유지보수하거나 코드를 리뷰 받을 때도 아주 깔끔한 인상을 줄 수 있습니다.

가장 먼저, 프로젝트에 sass 패키지를 설치해볼게요. 사용하시는 패키지 매니저에 맞게 아래 명령어 중 하나를 터미널에 입력해 주세요.

pnpm add -D sass

npm install --save-dev sass

yarn add -D sass

bun add -D sass

알아두면 좋은 정보 (Good to know):

Sass는 두 가지 다른 문법을 지원하고, 각각 고유한 파일 확장자를 가지고 있어요.
.scss 확장자를 사용하려면 SCSS 문법을 따라야 하고,
반면에 .sass 확장자를 사용하려면 들여쓰기 문법 (Indented Syntax, "Sass")을 사용해야 합니다.

만약 둘 중에 어떤 것을 선택해야 할지 잘 모르시겠다면, 일단 .scss 확장자로 시작하시는 것을 추천해 드려요. SCSS는 우리가 원래 알고 있는 일반 CSS의 상위 집합(superset)이기 때문에 기존 CSS 코드를 그대로 가져와서 쓸 수 있고, 낯선 들여쓰기 문법("Sass")을 새로 배우지 않아도 되거든요.

Sass 옵션 커스터마이징 (Customizing Sass Options)

만약 프로젝트 전반에 걸쳐 Sass 옵션을 따로 설정하고 싶으시다면, next.config 파일 안에서 sassOptions 속성을 사용하시면 됩니다.

💡 강사 부연 설명: "옵션을 굳이 왜 설정해야 하죠?" 라고 생각하실 수 있어요. 예를 들어, 모든 SCSS 파일에서 공통으로 사용하는 변수 파일(색상, 폰트 크기 등)이나 믹스인(Mixin)이 있다고 가정해 볼게요. 매번 파일마다 @import나 @use를 작성하려면 정말 귀찮겠죠? 이럴 때 additionalData 옵션을 사용하면, 빌드할 때 Next.js가 알아서 모든 Sass 파일 최상단에 해당 코드를 자동으로 주입해 줍니다. 정말 편리한 기능이에요!

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

module.exports = nextConfig

구현체 지정하기 (Implementation)

Sass를 컴파일할 때 어떤 구현체를 사용할지 implementation 속성을 통해 명시적으로 지정할 수도 있어요. 기본적으로 Next.js는 우리가 맨 처음에 설치했던 sass 패키지 (Dart Sass)를 사용한답니다. (최신 기능과 성능 최적화가 잘 되어 있기 때문에 특별한 이유가 없다면 기본값을 쓰시는 게 좋습니다!)

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */

const nextConfig = {
  sassOptions: {
    implementation: 'sass-embedded',
  },
}

module.exports = nextConfig

Sass 변수 (Sass Variables)

Next.js는 CSS 모듈 파일에서 밖으로 내보낸(exported) Sass 변수들을 자바스크립트/타입스크립트 파일에서 가져다 쓰는 기능을 지원합니다.

예를 들어, .scss 파일에서 정의한 primaryColor라는 Sass 변수를 리액트 컴포넌트 쪽으로 내보내서 사용하는 코드를 한번 볼게요.

$primary-color: #64ff00;

:export {
  primaryColor: $primary-color;
}

// 루트 `/` URL과 매핑됩니다.

import variables from './variables.module.scss'

export default function Page() {
  return <h1 style={{ color: variables.primaryColor }}>Hello, Next.js!</h1>
}

💡 강사 팁: 이 :export 문법은 실무에서 디자인 시스템을 구축할 때 정말 자주 쓰이는 마법 같은 패턴이에요! 보통 프론트엔드 개발을 하다 보면, CSS뿐만 아니라 자바스크립트 로직(예: 차트를 그리는 라이브러리나 인라인 스타일이 강제되는 컴포넌트) 안에서도 메인 컬러 색상값이 필요한 경우가 생깁니다. 이때 값을 JS에 하나, CSS에 하나 중복으로 적어두면 나중에 테마를 바꿀 때 두 군데 모두 수정해야 해서 실수가 발생하기 쉽죠. 하지만 위 방법처럼 Sass를 단일 진실 공급원(Single Source of Truth)으로 삼아 :export로 넘겨주면, 값을 한 곳에서만 관리할 수 있어서 구조적으로 아주 탄탄한 프로젝트를 만들 수 있습니다.

---

모든 문서의 의미론적인 개요(semantic overview)를 한눈에 살펴보고 싶으시다면, https://nextjs.org/docs/sitemap.md 문서를 참고해 주세요.

이 사이트에서 제공하는 모든 사용 가능한 문서의 목차(index)가 필요하시다면, https://nextjs.org/docs/llms.txt 를 확인해 보시면 됩니다!