[TIL #15-2 WECODE] React SASS

210303 WECODE #15-2 SASS

1. 설치

npm install node-sass@4.14.1 --save

• 설치 시 node-modules 폴더에 node-sass 폴더가 생성된다. (package source code)
• --save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트

// package.json
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "node-sass": "^4.14.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  }

• package.json에 들어가보면 node-sass가 설치된 것을 확인할 수 있다! --save의 중요성!!!

2. .css 파일의 확장자 .scss로 바꿔주자.

자바스크립트 파일의 import 구문도 수정해야 함!

3. Nesting 기능 적용하기

• Sass의 가장 기본적인 기능으로 Nesting이 있다.
• JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정
• 변수활용, &연산자, @extend 등 여러가지 기능을 연습해야 겠다.
• $theme-color: blue: 중복되는 색깔을 묶기
• %flex-center {display:flex; flex-direction:column}: 중복되는 기능 묶기
• button{ button:hover {있을 때 &:hover {로 묶어주기

login-container {
  @extend %flex-center;
	button {
	  width: 200px;
		height: 100px;
		background-color: $theme-color;
		&:hover {
			background-color: red;
			cursor: pointer;
		}
	}
}