[SCSS] 설치 및 컴파일

(Mac OS 기준)

설치

gem install sass

하면 설치가 되지만
ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.
이런 오류가 발생해서 다음의 명령어로 실행한다.

sudo gem install sass

패스워드를 입력하면 설치 완료

설치 확인

컴파일

Less, Scss, Sass는 CSS를 간편하게 사용하기 위해 개발된 CSS의 전처리기(preprocessor)다. Less, Scss, Sass를 코드로 작성한 뒤 컴파일 과정을 거쳐 css파일로 만들어야 한다.

css파일을 작성한 뒤, 파일이 있는 디렉토리로 이동한다.

# sass [직접 생성한 scss파일] > [컴파일해서 만들 css파일]
sass site.scss > site.css

디렉토리를 확인하면 css파일이 생성되어 있고, html파일에도 컴파일한 css 파일을 넣어줘야 한다.

<link rel="stylesheet" href="site.css/site.css">

• 자동으로 업데이트 하기
  watch command를 이용하면 scss파일을 변경할 때 마다 자동으로 컴파일을 해줘서 편하게 사용할 수 있다. scss를 수정하고 새로고침하면 바로 바로 업데이트가 된다.

# sass --watch [직접 생성한 scss파일] : [컴파일해서 만들 css파일]
sass --watch site.scss:style.css