[React]React에서 Sass 사용

이번 포스팅에서는 React 프로젝트에서 Sass를 사용하는 방법에 대해 설명합니다.

 

목차

1. Sass 개념
2. React 프로젝트에서 Sass 사용하는 방법

---

Sass 개념

Sass는 Syntactically Awesome Stylesheet의 약자로 아래 특징을 가지는 CSS 전처리기입니다.

• 중첩 규칙
• 변수 정의
• 인라인
• mixins
• 함수 사용

간단하게 작성된 CSS는 문제가 없지만, 방대하고 복잡하게 구현된 CSS는 한눈에 이해하기 어려우며 가독성이 저하되기 때문에 유지보수가 어렵습니다.

 

하지만, Sass를 사용하면 복잡한 코드를 재사용 가능하고 좀 더 심플하게 작성할 수 있습니다.

 

Sass는 전처리기이기 때문에 직접 동작시킬 수 없으며, 웹에서 실행되지 않습니다.

 

Sass가 웹에서 동작하는 원리는 node-sass 패키지를 사용하여 Sass를 CSS로 컴파일 후 컴파일된 CSS가 웹에서 동작하는 구조입니다.

 

다음은 CSS와 Sass의 차이점을 보여주는 간단한 코드입니다.

• CSS

body {
 color: #ffffff;
 font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
}

• Sass

$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

body {
 color: $white;
 font: $ubuntu-font;
}

위 코드처럼 Sass에는 변수를 정의할 수 있습니다.

 

Sass의 다양한 기능을 알고 싶다면, 공식 문서에서 확인해주세요.

---

React 프로젝트에서 Sass 사용하는 방법

1. 설치

※ 패키지를 설치하기 전에 PC에 설치된 node 버전에 호환되는지 확인하는 것이 좋습니다.

 

yarn을 이용하여 설치하는 경우 아래 명령어를 입력합니다.

yarn add node-sass

 

npm을 이용하여 설치하는 경우 아래 명령어를 입력합니다.

npm install -g node-sass

 

2. 확장자가 css인 파일을 scss로 변경합니다.

예시) styles.css → styles.scss

 

3. scss로 변경한 파일을 import 합니다.

예시) import "./styles.css" → "./styles.scss"