SASS

✅ SASS

👉 SASS 설치(터미널)

npm install node-sass@4.14.1 --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 기능 적용

• Nesting은 Sass의 가장 기본적인 기능이다.
• 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 Nesting */
nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
          li {
            display: inline-block;
          }
    }

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

---

🟡 변수 활용, & 연산자, extend 등 기본 기능 적용

/* css */
login-container {
  display: flex;
  justify-content: center;
  align-items: center
}

button {
  width: 200px;
  height: 100px;
  background-color: blue;
}

button:hover {
  background-color: red;
  cursor: pointer; 
}

input {
  background-color: blue;
}

input:focus {
  background-color: red;
}

/* scss Nesting */

/* common.scss에 선언해주는 것이 좋다 */
$theme-color: blue;    
$point-color: red;

/* %를 통해 형식 전체를 가져올 수 있다(common.scss에 선언해주는 것이 좋다) */
%flex-center {         
	display: flex;
	justify-content: center;
        align-items: center
}



login-container {
  @extend flex-center;     /* @extend를 통해 'flex-center'로 정의한 형식을 전체 적용한다 */
	button {
	  width: 200px;
	  height: 100px;
	  background-color: $theme-color;
		&:hover {
		  background-color: red;
		  cursor: pointer;
		}
	}
	input {
    		color: $point-color;
		background-color: $theme-color;
		&:focus {
		  background-color: red;
		}
	}
}