[사스(Sass)] Sass 기본 사용법 (컴파일 및 명령어)

지난 포스팅에서 사스(Sass)에 설치 방법에 대해서 포스팅을 했습니다.

이번 포스팅은 설치가 완료된 사스(Sass)를 사용할수 있는 기본 사용법에 대해서 포스팅 하고자합니다.

선행 작업인 Ruby등의 언어 설치 및 Sass 설치 해야 하기 때문에 사스(Sass) 설치 내용을 참고 부탁드리겠습니다.

---

  사스(Sass) 디렉토리 설정 하기

우선 사스(Sass)의 확장자 이름은 .scss로 표기 됩니다.

예를들어 filename.scss 의 파일이 존재 한다고 하면은 해당파일은 사스(Sass)로 작업파일 이구나 

하고 생각 하시면 되겠습니다.

그럼 일단 .scss 파일을 .css파일로 어떻게 변환 되는지 확인 해보도록 하겠습니다.

"원도우 키 + R" 엔터 활성된 창에 "cmd" 라고 입력 합니다. 윈도우OS 에서 명령 프롬프트 실행시키는 단축키 입니다.

(Mac OS라면 컨트롤 + 스페이스 후 활성된 창에 terminal 입력후 엔터 아래 이미지와 유사한 콘솔창이 활성됩니다.)

콘솔창이 활성 되었다고 하면은 본인이 작업할 디렉토리를 설정해야 합니다.

저는 D드라이브 → test폴더 에 생성하고자 합니다.

콘솔창에 아래와 같이 입력을 해주시기 바랍니다.

>cd D:\test (cd 뒤에 경로는 복사 해놓은 폴더 경로를 붙여 넣으면 됩니다.)

>d:

D:\test> (해당 폴더 경로가 노출되면은 설정 완료)

  사스(Sass) 파일 생성 및 컴파일 하기

-사스 (Sass) 파일 생성

경로 설정된 폴더에 사스(Sass) 파일을 아래 이미지와 같이 생성해줍니다.

생성된 파일의 파일명 및 확장자를 변경 해주시기 바랍니다.

-생성된 Sass 파일 컴파일

생성된 파일을 본인이 사용하고 있는 에디터 파일에서 Open합니다.

파일을 Open 하고 Sass파일에 내용입력합니다.

내용입력 하고 저장 후 다시 콘솔 창으로 와서 아래와 같이 명령어를 입력하여 콘솔합니다.

>sass test.scss test.css

앞이 컴파일을 하는 scss(Sass) 파일이고, 뒤에 css 파일명이 컴파일 후 생성되는 파일 이름입니다.

이렇게 하면 test.css 파일과 test.map 파일이 생기는데, test.css는 컴파일이 진행된 파일이고, 

map 파일은 scss 와 css가 어떻게 연결 되어 있는지에 대한 정보 파일 정도로 이해 하면 된다

하지만 매번 이렇게 컴파일을 할수 없기에 내가 작성하고 있던 파일일 변경(저장) 되면은 자동으로

컴파일 하도록 설정할 수 있습니다. 명령어는 아래와 같습니다.

>sass --watch test.scss:test.css

위와 같이 해당 명령어를 입력하였을 시 test.cscc가 변경되면은 자동으로 test.css가 변경됩니다.

그리고 해당 명령어를 취소 하고자 할때는 컨트롤(Ctrl + c)를 누르게 되면은 취소 됩니다.

또한, 해당 폴더에 여러 개의 scss(Sass)가 존재 하고 작업을 한다면 위에 방법대로 작업이 불편할수 있습니다.

이러한 사항을 보완하고자 폴더 자체를 컴파일 시키는 명령어가 있습니다.

명령어는 다음과 같습니다.

>sass --watch .:.

watch 뒤의 "."(점)은 현재 위치를 표기 하는 것이며 ":"(콜론)뒤도 현재 위치를 표기 한것입니다.

결론은 위의 명령어는 현재의 폴더의 scss(Sass) 전부를 컴파일 시키는 것입니다.

  부록 : 컴파일 스타일 변경

컴파일을 하는데 있어 스타일을 결정할 수 있습니다.

--style 옵션을 통해서 할 수 있으며 명령어는 다음 과 같습니다.

※ Options

- nested : 뎁스별로 구분해서 컴파일

- compact : 요소에 스타일이 속성을 한줄씩 정렬해서 컴파일

- expanded : 요소에 모든 스타일을 한줄에 컴파일

- compressed : 모든 요소를 공백없이 컴파일 (압축스타일)

ex) sass --watch --style compressed .:.