TIL. SASS

SASS

SASS (syntactically awesome stylesheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다.

• SASS의 장점

1. css보다 심플한 표기법으로 css를 구조화하여 표현할 수 있다.
2. 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화 할 수 있다.
3. css에는 존재하지 않는 Maxin 등의 강력한 기능을 활용하여 css 유지보수 편의성을 큰 폭으로 향상 시킬 수 있다.

1. Sass 설치

npm install node-sass --save

• 설치 시 node-modules 폴더에 node-sass 폴더가 생성된다.
• --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로 바꾸기

**Sass 파일의 확장자는 .scss이다. .css확장자로 되어 있는 파일을 전부 .scss확장자로 바꿔야한다. (자바스크립트 파일의 import 구문도 수정해야한다.)

Sass와 SCSS의 차이점

Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지워하는 CSS의 상위집합이다.
즉, SCSS는 CSS와 거의 같은 문법으로 Sass기능을 지원한다는 말이다.

• Sass:

.list
	width: 100px
    float: left
    li
    	color:red
        background: url("./image.jpg")
        &:last-child
        	margin-right: -10px

• SCSS

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

더 쉽고 간단한 차이는 {}(중괄호)와 ; (세미콜론)의 유무이다.