03-pages > 02-api-reference > 03-next-config-js > images.mdx

docs/03-pages/01-building-your-application/04-styling/04-sass.mdx

@@ -1,7 +1,59 @@
 ---
 title: Sass
-description: Learn how to use Sass in your Next.js application.
+description: Next.js에서 Sass를 사용하는 방법 배우기
 source: app/building-your-application/styling/sass
 ---
 
-{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PageOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+Next.js는 기본적으로 `.scss` 및 `.sass` 확장자를 모두 사용하는 Sass를 지원합니다. CSS 모듈과 `.module.scss` 또는 `.module.sass` 확장자를 통해 컴포넌트 수준의 Sass를 사용할 수 있습니다.
+
+일단 [`sass`](https://github.com/sass/sass)를 설치하세요.
+
+```bash
+npm install --save-dev sass
+```
+
+> **참고:**
+>
+> - Sass는 각자 고유한 확장자를 가진 [두 가지 구문](https://sass-lang.com/documentation/syntax)을 지원합니다. `.scss` 확장자를 사용하려면 [SCSS 구문](https://sass-lang.com/documentation/syntax#scss)을 사용해야 하고, `.sass` 확장자를 사용하려면 [들여쓰기 구문("Sass")](https://sass-lang.com/documentation/syntax#the-indented-syntax)을 사용해야 합니다.
+>
+> - 어떤 것을 선택해야 할지 잘 모르겠다면 CSS의 상위 집합이며 들여쓰기 구문("Sass")을 배울 필요가 없는 `.scss` 확장자부터 시작하세요.
+
+### Sass 옵션 커스터마이징
+
+Sass 컴파일러를 구성하고 싶다면 `next.config.js`에서 `sassOptions`를 사용하세요.
+
+```js
+const path = require('path')
+
+module.exports = {
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
+}
+```
+
+### Sass 변수
+
+Next.js는 CSS 모듈 파일에서 내보낸 Sass 변수를 지원합니다.
+
+예를 들어 내보낸 `primaryColor` Sass를 사용한다면 다음과 같습니다:
+
+```scss
+$primary-color: #64ff00;
+
+:export {
+  primaryColor: $primary-color;
+}
+```
+
+```js
+import variables from '../styles/variables.module.scss'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <Layout color={variables.primaryColor}>
+      <Component {...pageProps} />
+    </Layout>
+  )
+}
+```