React sass 공식문서

1. Sass 설치

npm install node-sass -save

 -  node-modules 폴더에 node-sass 폴더가 생성된다.

• --save  : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트

// package.json
{
  "name": "westagram-react",
  "version": "0.1.0",
  "private": true,
  "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"
  }
}

2. .scss로 변경

• 기존의 css 파일을 .scss로 변경한다.
• Sass 파일의 확장자는 .scss이다.

3. Nesting 기능

• Sass에서 기본적인 기능인 Nesting을 적용하여 JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의해준다.

nav {

}

nav ul{

}

nav ul li {

}

nav{
	ul{
    	li{
        
        }
    }
}

4. 변수 활용, & 연산자, mixin 기본 기능 적용

$theme-color: blue;

@mixin flex-center {
	display: flex;
	justify-content: center;
  align-items: center
}

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