Scss
- --save:package.json에 설치된 패키지의 이름과 버전정보를 업데이트
- Scss 파일의 확장자로 바꿔주기 .css-> .scss(자바스크립트 파일의 import 구문도 함께수정)
CSS 전처리기 (Preprocessor)
- 스타일링을 편하게 할 수 있게 해줌
Nesting
- scss의 가장 기본적인 기능
- JSX 최상위 요소의 className 을 컴포넌트 이름과 동일하게 설정
- .scss파일에서도 최상위 요소 안쪽에서 하위요소의 스타일 속성을 정의할 수 있도록 해줌
변수, 연산자, mixin
- $theme-color: blue;
자주 사용하는 것을 변수에 선언하고 그 변수로 가져다쓴다고 생각하면 쉬움- @mixin 속성 {....}: 자주 사용하는 것을 모아두는 것(ex)가운데정렬...)
- @include 속성;: @mixin을 사용하는 것
- &: 상위 요소를 가리킴
- css끼리도 import 할 수 있음
자주 사용하는 로직을 짜서 import 해서 가져오는 방식
:D