[React] 06. Sass

🎈 설치하기

npm install node-sass --save

• 설치 시 node-modules 폴더에 node-sass 폴더가 생성됌.
  (package source code)
• --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"
  }
}

🎈 Nesting 기능

Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있다.
JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있다.

CSS 파일

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

SCSS 파일

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
	li {
		display: inline-block;
	}
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

🎈 그 외

그 외 여러가지 기능도 많은데 그거는 사용할 때마다 추가하도록 하겠다.