내일의집 (with sass)

프로젝트명 : Tomrrow house project with Sass

기간 : 21.11.11 ~ 진행중

sass에 관한 공부 기록

• Sass를 쓰는 이유 : 반복적인 css 사용을 줄이고 더 편하게 코딩하기 위해서
  터널손목증후군(?)을 극복하기 위해서 sass함수를 사용해보고 싶어서

• Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 집합(Superset)입니다.
  즉, SCSS는 CSS와 거의 같은 문법으로 Sass기능을 지원한다는 말
  scss와 sass의 차이점이다.

설치방법

sass를 사용하기 위해서는 약간의 설치과정이 필요하다.

npm i node-sass // npm-sass 설치

실행방법

npm run sass // sass 실행

❓ 이렇게 순차적으로 한다면 오류가 나타난다

package.json 파일에서 "script" 부분을 확인

⭕️ 다음과 같이 입력한다.

   "node-sass": "node-sass",
    "sass": "node-sass -wr --source-map true styles/main.scss ./style.css"

"sass" 안에 코드 내용은 styles/main.scss를 기준으로 하고 적용할 대상은 ./style.css에 반영하도록 한다.

• option ( -wr , -source-map)
  -wr : sass style을 변경하고 style.css에 반영할때 매번 nom run sass를 쳐야하는데 이러한 귀차니즘을 방지하기위한 옵션이라고 보면 된다.
• source-map : 개발자 도구에서 scss를 통한 경로를 확인 할때 유용함
  boolean 값도 같이 표기해야함.

TIL(2021.11.14 - sass 학습)