SASS
SASS (syntactically awesome stylesheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다.
1. Sass 설치
npm install node-sass --save
// 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로 바꾸기
**Sass 파일의 확장자는 .scss
이다. .css
확장자로 되어 있는 파일을 전부 .scss
확장자로 바꿔야한다. (자바스크립트 파일의 import 구문도 수정해야한다.)
Sass와 SCSS의 차이점
Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지워하는 CSS의 상위집합이다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass기능을 지원한다는 말이다.
.list
width: 100px
float: left
li
color:red
background: url("./image.jpg")
&:last-child
margin-right: -10px
.list {
width: 100px;
float: left;
li {
color: red;
background: url("./image.jpg");
&:last-child {
margin-right: -10px;
}
}
}
더 쉽고 간단한 차이는 {}(중괄호)와 ; (세미콜론)의 유무이다.