npm install sass --save
--save
: package.json에 설치된 패키지의 이름과 버전 정보를 업데이트// package.json
{
"name": "webucks-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"
}
}
Sass 파일의 확장자는 .scss
이다. .css
확장자로 되어 있는 파일을 전부 .scss
확장자로 바꿔줘야 한다.
Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있다. JSX 최상위 요소의 className
을 컴포넌트 이름과 동일하게 설정해주고, .scss
파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 해준다.
/* 네스팅 적용 X (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;
}
}
/* 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 */
$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;
}
}
}