[React] CSS 대신 SASS 사용해보기

💡 실습 포인트!

💜 node-sass 설치하기

• CSS 가 너무 길어지는 경우 SASS 라는 preprocessor 를 이용하면 조금 더 쉽고 짧게 프로그래밍 언어처럼 CSS 를 작성하는 것이 가능하다.
• 쉽게 말해 SASS 를 이용하면 변수, 반복문, 함수 등과 같은 문법으로 CSS 작성이 가능해진다는 것이다.
• SASS 로 작성한 뒤에 CSS 로 컴파일만 해주면 되는데, 이 부분은 node-sass 라는 라이브러리만 설치해주면 해결된다.

🤍 node-sass 설치하기

// npm 을 이용하는 경우
npm install node-sass

// yarn 을 이용하는 경우
yarn add node-sass

• 터미널에 위 코드 중 하나를 입력해주면 node-sass 가 설치된다.

---

📌 node-sass 설치 시 브라우저 미리보기에서 에러 발생할 경우 참고하기

• nodejs 14 버전을 사용한다면 node-sass 를 지웠다가 4.14 버전으로 설치해준다.

// 설치된 node-sass 지우기 (아래 두 코드 중 택 1)
npm uninstall node-sass
yarn remove node-sass

// node-sass 4.14 버전 설치하기
npm install node-sass@4.14

• nodejs 16 버전 이상을 사용한다면 다음과 같이 진행해준다.

// 1. node-sass 로 6 버전 설치하기 (아래 두 코드 중 택 1)
npm install node-sass@6
yarn add node-sass@6 

// 2. node_modules 폴더랑 yarn.lock 혹은 package-lock.json 보이는걸 다 삭제하기 

// 3. 터미널에서 node_modules 폴더 재설치 해주기 (아래 두 코드 중 택 1)
npm install 
yarn install

---

🤍 SASS 파일 생성한 후 import 해보기

• 기존에 css 파일을 생성하여 import 하던 방식대로 하되 파일명만 scss 로 변경해주면 된다.

import './Detail.scss';

• 나의 경우 Detail.scss 파일을 만들어준 후 Detail.js 파일에 import 해주었다.
• 이제 scss 파일 내에서 SASS 문법으로 작성이 가능하며 저장하면 자동으로 css 파일로 컴파일된다.

---

💜 SASS 문법 알아보기

🤍 $ 변수 문법

• scss 파일에서는 변수를 사용하는 것이 가능하다.

$main-color : #484848;

.darkgrey {
  color : $main-color;
}

• $변수명 : 집어넣을 값;
• 위와 같이 변수를 만들고 원하는 자리에 사용 가능하다.
• 변수명은 한글도 사용이 가능하며, 색상뿐만 아니라 px값, %값 등 다양하게 적용이 가능하다.

---

🤍 @import 문법

• 사실 css 문법으로, css 파일 간 import 를 할 수 있는 문법이다.

import './Detail.css';

• import 뒤에 따옴표를 넣어 파일 경로를 넣어주면 된다.

---

🤍 nesting 문법

• css 를 작성하다보면 특정 셀렉터의 하위 셀렉터에 스타일링을 주기 위해 길고 복잡한 셀렉터를 여러번 사용해야하는 경우가 많다.
• 그래서 scss 파일 안에서는 아래와 같이 개발이 가능하다.

// css 파일에서 작성하는 경우
.my-alert {
	background: #eee;
	padding: 15px 20px;
	max-width: 500px;
	width: 100%;
	margin: auto;
}
 
.my-alert p {
	margin-bottom: 0;
}


// scss 파일에서 nesting 문법 사용한 경우

.my-alert {
	background: #eee;
	padding: 15px 20px;
	max-width: 500px;
	width: 100%;
	margin: auto;

	p {
		margin-bottom: 0;
	}
}

• 위와 같이 기존의 css 작성하는 방법이 셀렉터를 상위 셀렉터 하위 셀렉터를 옆으로 길게 나열하는 방식이었다면, scss 에서는 상위 셀렉터 안쪽에 하위 셀렉터를 작성해주는 것이다.
• 이렇게 사용하면 셀렉터의 해석이 쉽고 관련된 class 끼리 한 덩어리로 관리하기 쉽다는 장점이 있다.

---

🤍 @extend 문법

.my-alert {
	background: #eee;
	padding: 15px 20px;
	max-width: 500px;
	width: 100%;
	margin: auto;

	p {
		margin-bottom: 0;
	}
}

 

function Detail(){
  return (
    <div className="container">
      <div className="my-alert">
        <p>재고가 얼마 남지 않았습니다</p>
      </div>
    </div>
  )
}

• 위와 같이 Detail.sccs 파일과 Detail.js 파일을 작성하면 회색 알림창이 하나 생성된다. 
• 예를 들어, 이러한 알림창을 배경색만 다르게 생성하려면 어떻게 해야 할까?
• .my-alert 라는 클래스를 복사-붙여넣기하여 새로운 클래스를 만들 수도 있지만 그보다 더 좋은 방법은 @extends 문법을 활용하는 것이다.

.my-alert {
	background: #eee;
	padding: 15px 20px;
	max-width: 500px;
	width: 100%;
	margin: auto;

	p {
		margin-bottom: 0;
	}
}

.my-alert-gold {
	@extend .my-alert;
	background: gold;
}

• 위와 같이 새로 만든 클래스 안에 @extend 복사해올 클래스명 을 작성해주면 해당 클래스를 그대로 복사해온다.
• 그리고 수정할 부분만 새로 작성해주면 덮어쓰기가 되어 gold 색의 배경을 가진 알림창이 만들어진다.

---

🤍 @mixin / @include 문법

• mixin 은 함수를 만드는 문법이다.
• 원래 함수 문법은 코드를 축약하고 재사용할 때 주로 사용하는데 SASS 에서는 function 이라는 키워드 대신에 @mixin 함수명() 이라고 적은 후 중괄호 안에 축약하고 싶은 코드를 모두 작성해주면 된다.
• 그리고 함수를 불러올 때는 @include 함수명() 과 같은 형태로 사용한다.

@mixin alert() {
	background: #eee;
	padding: 15px 20px;
	max-width: 500px;
	width: 100%;
	margin: auto;
}

.my-alert {
	@include alert();

	p {
		margin-bottom: 0;
	}
}

.my-alert-gold {
	@extend .my-alert;
	background: gold;
}

• 단, JavaScript 문법과는 다르게 함수명이 위에 선언이 되어있어야 밑에서 사용이 가능하다.
• JavaScript 에서와 동일하게 함수에 파라미터도 넣을 수 있고 다양한 기능을 만들어 내는 것도 가능하다.