[Scss] Scss 이해

1. Scss vs Sass

문법만 조금 다름 둘이 별로 차이가 안나며, 프로그램은 sass 이지만, scss 문법을 사용한다

• sass: 개발자들이 보기에 css와 이질감이 느껴지는 문법
• scss: 기존 css 방식과 거의 흡사

앞으로 이 시리즈에서는 Scss 문법으로만 진행할 것이기 때문에 Scss 라고 통칭한다

2. Sass Install

npm install -D sass

3. Compile

sass [target file name].scss:[convert file name].css

위의 명령어로 변환할 scss 파일을 css로 변환한다
하지만 scss 파일을 변경할 때마다 css 파일로 compile 해야하는데, 너무 귀찮아진다

sass --watch [target file name].scss [convert file name].css

--watch 는 모든 변경사항을 감지하고 css로 알아서 compile 해준다

compile할 때 .map 파일이 생성되는데 이 파일은 컴파일된 소스를 원본 소스로 맵핑해주는 역할이다 이건 개발자용 파일이고 배포시에는 필요없다
.map 파일이 생기지 않게 하려면 컴파일 할 때 --no-source-map 플래그를 넣으면 된다

cf) package.json 적용

"scripts": {
  "start:scss": "sass --style=expanded --watch src/scss:src/css --no-source-map",
  "build:scss": "sass --style=compressed src/scss:src/css --no-source-map",
},