[REACT] Sass

Sass

Sass(Syntacitically Awesome Style Sheets)는 css전처리기로 복잡한 작업을 쉽게 작업 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수에 탁월함 

 

설치

yarn add sass

 

*Sass는 두 가지 확장자를 지원함 .scc와 .sass
Sass가 처음 나왔을 때는 .sass 확장자만 지원하다가 나중에 개발자 들의 요청이 많아서 .scss도 지원하기 시작했다.

 

Ex.sass

$front-stactk : Heldie, sans-werid
body
   font: 100%
   color:$primary-color

EX.scss

$front-stactk : Heldie, sans-werid;
body{
   font: 100%;
   color:$primary-color;
}

두 파일의 가장 큰 특징은 중괄호({}) 와 세미콜론(,)의 사용 여부이다.
Sass를 사용할 때도 파일 이름 뒤에 .module.scss 확장자를 사용해 주면 CSS Moudule로 사용할 수 있다.
CSSModule.module.css 파일의 이름을  CSSModule.module.scss로 변경해도 아무 이상 없음.