Syntactically Awesome Style Sheets 의 약자로 CSS를 확장한 언어이다.
Sass 는 Sass표기법(.sass)과 Scss표기법(.scss)이 존재하는데, Sass 3.0부터 기본 표기법으로 채택된 Scss(sassy CSS) 사용을 권장하고 있다.
Sass는 점점 커지고 복잡해지며, 유지관리가 어려워지고 있는 CSS를 보완하고 조금 더 CSS에 친숙한 전처리기를 만들기 위해 만들어졌다. Sass를 사용하면 CSS에 아직 존재하지 않는 변수, 중첩, 믹스 인, 상속 및 CSS작성을 조금더 수월하고 유용하게 만들 수 있다. sass / scss 는 거의 동일한 기능을 가지고 있다.
--save
: package.json에 설치된 패키지의 이름과 버전 정보를 업데이트.scss
입니다. .css
확장자로 되어 있는 파일을 전부 .scss
확장자로 바꾼다. (자바스크립트 파일의 import 구문도 수정한다.)Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있다. JSX 최상위 요소의 className
을 컴포넌트 이름과 동일하게 설정해주고, .scss
파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 해준다.
nesting 을 통해 selector 의 관계를 명확하게 이해할 수 있을 뿐만 아니라 변수를 활용함으로써 코드의 중복을 피할 수 있다.