[TIL][React] Sass

Sass

CSS전처리기중 하나이며 CSS 문서의 양을 효율적으로 처리하고 관리해 줌으로 아래와 같은 장점이 있다.

재사용성 : 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체
시간적 비용 감소 : 임의 함수 및 Built-in 함수로 인해 개발 시간적 비용 절약
유지 관리 : 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리가 용이

1. Sass 설치

npm install node-sass --save

2. css 파일의 확장자 .scss로 바꾸기

Sass의 확장자는 scss임으로 확장자를 바꿔주자.
🤨 자바스크립트의 import부분도 꼭 수정해주자.

3. Nesting 기능 적용하기

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

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

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