지난 포스트에서 SCSS를 소개하면서 SCSS를 웹에서 사용하기 위해서 컴파일 과정을 거쳐야한다고 언급했습니다. 그래서 이번 포스트에서는 SCSS 사용법에 앞서 SCSS를 컴파일하는 여러 방식들에 대해서 알아보도록 하겠습니다.
컴파일하기
SassMeister
SassMeister는 온라인으로 .scss (또는 .sass)파일을 컴파일해 적용시킬 수 있는 사이트입니다. 온라인 웹 사이트를 이용하기 때문에 컴파일러를 따로 설치하기가 부담되는 상황에서 이용하기 좋은 방법입니다.
SCSS를 공부하면서 만들어볼 코드들은 간단한 코드이기 때문에
SassMeister를 사용해서 작성할 예정입니다.
VScode Extension 이용
VScode를 이용할 경우 sass, sass Lint, live sass compiler, live server를 설치해서 scss를 컴파일 할 수 있습니다.
node-sass
node-sass는 Node.js 플랫폼에서 SASS(SCSS)를 사용할 수 있게 해주는 라이브러리입니다. 저도 SCSS를 처음 접할 때 이 라이브러리를 사용했었습니다.
당연히 npm 패키지 라이브러리이기 때문에 Node.js가 설치되어있어야합니다.
노드 설치 후 node-sass를 설치합니다.
npm install -g node-sass
//만약 전역 설치하기 싫다면, -g 옵션을 빼 주세요.설치 후 node-sass -v를 입력했을 때 버전이 뜬다면, 라이브러리 설치에 성공한 것 입니다.
node-sass로 컴파일은 다음과 같은 명령으로 수행합니다.
node-sass 옵션 [입력 파일] [출력 파일]
/*
입력 파일: 컴파일 하고자 하는 .scss, .sass 파일
출력 파일: 컴파일 후 나오는 .css 파일
*/이렇게 SCSS(SASS)파일을 컴파일 하는 방법에 대해서 알아봤습니다. 위 소개한 방법 세 가지가 대표적인 컴파일 방법이고, 더 많은 컴파일 방식이 있으니 본인에게 편한 방식을 이용하시면 됩니다.
