2022.01.30(Sun.) <React에서 SASS/SCSS 사용하기>

css를 작업할떄는 항상 혈압에도 유의합시다.

1. 문제의 발단

자연스럽게 scss를 사용하고 있었지만 아직 포스팅을 한 번도 한 적이 없었다...! 왜 우리는 scss를 사용하며, 어떤 점이 유리하고 왜 이렇게 다들 사용하는지를 알아보자.

2. SCSS?

• css의 전처리기(CSS Preprocessor)
• 조건문, 반복문, 변수의 정의등 다양한 연산을 css에서도 할 수 있게 해 준다.
• 하지만 웹은 css 파일만을 읽을 수 있기 때문에 scss로 작성된 파일은 컴파일 과정을 거쳐 css로 바뀐다.

3. React에서 어떻게 적용시키나요?

• VS code의 익스텐션을 다운 받는다.

왼쪽의 Live Sass Complier가 중요한 익스텐션 입니다. 필수입니다. 오른쪽은 선택입니다. 가독성과 코드 작성을 도와줍니다.

• npm install --save sass로 sass 파일을 프로젝트의 packge.json에 install 한다.
• css 파일을 만들고 오른쪽 하단의 'Watch Sass'를 눌러 컴파일을 계속할 수 있도록 만든다.

가장 맨 앞에 있습니다.

4. 어떻게 쓰나요?

$concept-color : #DD4A68;

beader {
	color: $concept-color;

	nav {
    	color: black;
    }

}

• $를 이용하면 선언해서 사용할 수 있다.
• {} 안에 중첩으로 스타일을 적용시킬 수 있다.

5. 저는 왜 적용이 안 되나요?

• 대부분 import를 잘 못 했기 때문이다.
• @import "scss파일 경로"를 css파일이 있는 scss 파일에 최상단에 적용시킨다.
• 그 css 파일은 js 파일에서 import 되고 있다면 똑바로 적용된다.