From 12e57afaff70de53ed6f7a194d3cc3789c632c4a Mon Sep 17 00:00:00 2001
From: yeonsuBaek <soothbugger@gmail.com>
Date: Sat, 24 Jun 2023 15:46:56 +0900
Subject: [PATCH 1/2] =?UTF-8?q?docs:=20sass=20=ED=95=9C=EA=B8=80=ED=99=94?=
 =?UTF-8?q?=20=EC=B4=88=EC=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04-styling/04-sass.mdx                    | 56 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/docs/03-pages/01-building-your-application/04-styling/04-sass.mdx b/docs/03-pages/01-building-your-application/04-styling/04-sass.mdx
index 6735fd06b..bcf644be4 100644
--- a/docs/03-pages/01-building-your-application/04-styling/04-sass.mdx
+++ b/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>
+  )
+}
+```

From c19ceda18bf9c8c3e7ad71a37c78e62811ba5536 Mon Sep 17 00:00:00 2001
From: YeonsuBaek <soothbugger@gmail.com>
Date: Mon, 26 Jun 2023 14:42:46 +0900
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=EC=98=A4=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01-building-your-application/04-styling/04-sass.mdx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/03-pages/01-building-your-application/04-styling/04-sass.mdx b/docs/03-pages/01-building-your-application/04-styling/04-sass.mdx
index bcf644be4..869376432 100644
--- a/docs/03-pages/01-building-your-application/04-styling/04-sass.mdx
+++ b/docs/03-pages/01-building-your-application/04-styling/04-sass.mdx
@@ -1,6 +1,6 @@
 ---
 title: Sass
-description: Next.js에서 Sass를 사용하는 방법 배우서
+description: Next.js에서 Sass를 사용하는 방법 배우기
 source: app/building-your-application/styling/sass
 ---