SASS설정기 on NPM

어느덧 아무것도 모르던 css 작업을 실무에서 겪어가며, 점차 늘어나는 정신나간 분량의 css 코드들에 대해서 홀로 맞서기 버거워지기 시작하고있는 시점인 지금, 드디어 좀더 새련된 CSS처리방법을 강구해야겠다는 결심이 섰습니다.

유명한 후보로는 SASS 나 LESS.
둘의 각각의 특성에 따라 어느것이 더 배우면서, 적용하기 좋은지 짧은 비교의 시간을 가졌고, 비교당시 더 높은 점유율을 기록하는것으로 보이는 SASS가 당첨되었습니다.

LESS와 SASS는 모두 동일하게, css로 컨버팅 작업이 필요합니다. 그러므로 매번 서버를 리로드 하면서 컨버팅 또한 필요했기 때문에, SASS는 watch 라는 이름의 기능으로 핫리로드를 지원하고있었습니다.

하지만 매번 터미널 두개를 돌려서 watch를 돌리고 서버를 돌리기가 너무나도 귀찮은 나머지, 이 두 명령어를 동시에 날리게 하기 위해서 concurrently 를 사용하여 npm 명령어를 조금 조작할 것 입니다.

1. 우선 SASS를 설치합니다.
` npm i -g sass`
로 간단하게 sass를 설치하게 됩니다.

테스트를 위해 ./sass/default.scss 파일을 만들었습니다.

서버 node에서는 static 폴더를 ` ./public `으로 지정해 두고 있었습니다.
그러므로 css를 static으로 관리하기 위해 새 폴더를 만듭니다.
` ./public/css `

이제 ` default.scss ` 에서 예제 코드를 작성합니다.

body {
 background-color : red;
 container {
  background-color : orange;
 }
}

이제 완성된 scss 파일을 css로 변환해야 합니다.

` sass --watch ./sass/default.scss:./public/css/default.css `
변환이 완료됩니다.

2. 이제 이러한 복잡한 과정을 쉽게 조금씩 바꾸어 나갈것 입니다.
우선은 sass 폴더내의 모든 scss파일들을 public 폴더에 저장시킬것 입니다.
default.scss body.scss footer.scss 등의 여러파일이 있어도 한번의 명령어로
default.css body.css footer.css 로 바꿀수 있게 말이죠

간단합니다.
` scss --watch ./sass:./public/css `
단일 객체가 아닌 폴더를 지정하고, 출력물 폴더로 변경만 시켜주면 됩니다.

이제 watch를 프로젝트를 제시작 할때마다 치는 귀찮음을 해결해 볼 것 입니다.
물론 리눅스 유저라변 백그라운드로 손쉽게 처리할 수 있겠지만, 리눅스 알못인 저는 무언가 편한 작업을 요합니다.
npm은 우리가 js관련 작업 특히 node 작업에서 땔수 없는 메니져입니다.
npm의 추가 모듈을 이용해 볼 것 입니다.
` npm i -g  concurrently `

concurrently는 npm 명령어를 다중으로 실행 가능하게 돕는 모듈입니다.
프로젝트의 package.json 파일을 열어봅니다.

 "script" : 의 값들을 추가 할 것 입니다.
저는 npm start 라는 명령어로 ` node app.js ` 와 ` scss --watch ./sass:./public/css ` 를 동시에 실행하고 하나의 터미널에서 보이게 할 것 입니다.

` "script" : {
  "start" : " concurrently \" node app.js \" \" scss --watch ./sass:./public/css\" "
}
`
 이제 터미널에서 npm start 를 치게되면 두작업이 동시에 실행되는것을 볼 수 있습니다.

그런데 [0] 과 [1]로 실행중인 프로세스의 정보를 표기하는데 좀 보기가 어렵습니다.
배열명 말고 [Express] [Watch] 로 표시해 볼것 입니다.
 script : 에 start 의 값을 수정합니다.


` "script" : {
  "start" : " concurrently -n \"Express,Watch\" \" node app.js \" \" scss --watch ./sass:./public/css\" "
}
`
-n 으로 이름을 순서대로 정할 수 있습니다.

이제 로그를 보면 보기좋게 구분이 되기 시작합니다.

하지만 저는 변태입니다. 색깔을 넣어서 더 구분을 하고싶습니다.

-c 를 이용해 봅시다.

` "script" : {
  "start" : " concurrently -n \"Express,Watch\" -c \" red,yellow \" \" node app.js \" \" scss --watch ./sass:./public/css\" "
}
`
이제 [Express]는 빨강으로, [Watch]는 노랑으로 표기가 됩니다. 만족스럽네요.

추가적인 기능들은 스스로 들러보고 적용해 BOA효