[SASS] node-sass로 손쉬운 CSS 작성 및 컴파일.

https://www.npmjs.com/package/node-sass

node-sass

 

우선 node-sass를 쓰면서 느낀 건

css를 작성하면서 번거롭고 불편했던 부분들이 조금 해소되었다는 점.

 

1. css에서는 자식 class를 추가할 때 앞에 부모 class를 일일이 적어줘야 하는 번거로움. (ex. .test .test1 { style })

2. 변수를 설정할 수 있다. (ex. $color-black: #000) 요렇게 선언해놓고 스타일에 그냥 갖다 쓰면 된다. 나중에 한꺼번에 변경도 가능하니 관리의 효율성이 높다.

3. vscode를 사용하는 유저라면 자동저장 기능을 이용해서 실시간으로 수정내용을 화면으로 확인이 가능하다. (실시간 reload 기능이라고 해야 하나? 여튼 매우 편리함.)

...

 

아직 node-sass를 사용한지 얼마되지 않아서 완벽한 기능을 모두 알지는 못한다. 몇개월 사용하면서 느낀점만 간단히 기록함.

설치 방법은 간단함. 우선 nodejs가 미리 설치되어 있어야함.

 

1.  터미널 : npm install node-sass --save-dev

--save-dev를 붙이는 이유는 아래 포스팅 참고.

https://ithub.tistory.com/165

 

2. 터미널 : npm init -y

packge.json 파일을 생성하기 위한 초기화.

 

3. package.json 파일 생성 확인 후 스크립트 수정.

json파일 중간쯤 보면 script가 있는데 컴파일 경로를 지정해주면 된다.

"scripts": {
    "compile:sass": "node-sass main/sass/main.scss main/app.css -w"
  },

4. 터미널 : npm run compile:sass

아래 2줄의 명령어가 나오면 제대로 실행된거임.

 

 

끝.