👉🏼 설치
npm install sass --save
- 설치 시 node-modules폴더에 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"
}
}
👉🏻 .css 파일의 확장자를 .scss로 바꾸기
👉🏾 Nesting 적용하기
- sass의 가장 기본적인 기능으로 Nesting이 있는데, JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정하고 .scss파일에서도 최상위 요소 안에 하위 요소들의 스타일을 설정한다.
ex)
//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;
}
//sass
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
}
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
👉🏽 변수 활용, &연산자, mixin 등 기본 기능 적용
- sass에는 Nesting외에도 여러가지 기능이 있다. 공식 문서를 통해서 다른 기능들도 있다.
//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;
}
//sass의 변수, @mixin, @include 활용
$theme-color: blue;
$border-style: 1px black solid;
@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;
}
}
input {
background-color: $theme-color;
&:focus {
background-color: red;
}
}
}