[SASS 환경설정] sass를 사용해 퍼블리싱 하자![1] - sass 설치

조금 늦은 이야기일지 모르겠습니다만, 최근 웹 개발을 위해 SASS를 배우고 있습니다.

[SASS 홈페이지 화면]

잠시 SASS(Syntactically Awesome Stylesheets)에 대해 설명을 드리자면, 웹사이트 코딩에는 HTML, CSS, Javascript가 필수인데요, 그 중 하나인 CSS보다 상위에 있는 메타언어이며 CSS 전처리기로써 보다 간결하고 격식을 갖춘 CSS 문법을 사용합니다. 또한 CSS파일 중간에 위치하는 계층으로 Sass 문법으로 작성된 코드를 CSS로 변환해 줍니다.

Sass 문법은 기존 css 코딩과 비슷하지만, 코딩보다는 프로그래밍에 가깝지 않나 싶습니다. 하지만 Style을 함수나 변수로 정의해 사용할 수 있다는 매력이 있습니다. 코드도 훨씬 간결하고 보기 편해진다는 장점도 있습니다.

현재 외국 사이트에는 sass를 많이 사용하고 있는 추세입니다. 한국을 많이 쓰는지 잘 모르겠네요 ^^;

쨋든, sass를 배우기에 앞서 windows 환경에서 sass를 제대로 다룰 수 있는 환경을 구축하는 방법에 대해 말씀드리겠습니다.

이슈1. sass를 사용하기 위해서는 컴파일러가 필요합니다. sass컴파일러는 기본적으로 Ruby 언어를 기반으로 만들어졌기 때문에 sass 컴파일러를 동작시키기 위해 Ruby 최신버전이 필요합니다. Ruby는 아래 사이트에서 바로 받을 수 있습니다.

[Ruby 최신버전 다운받기 >>]

windows 64비트를 사용하시는 분은 (x64) 최신버전을 다운받으시면 됩니다. Ruby 최신버전을 다운받으셨으면 바로 설치합니다. 가벼운 프로그램이기 때문에 C드라이브에 바로 깔아버렸습니다.

설치중 Path를 등록할 수 있는 체크박스가 있는데요, 이 부분을 체크해두시는게 좋습니다. path를 추가하면 어디서든 Ruby를 사용할 수 있도록 PATH에 자동 등록되기 때문에 추후 sublime이나 다른 에디터에서 path를 설정할 필요가 없기 때문입니다.

설치가 끝나셨으면 "Window Key + R" 버튼을 눌러 실행창을 띄우시고 실행창에 "cmd"라고 타이핑해 command 창을 띄웁니다.

Ruby가 제대로 설치됐는지 확인하기 위해 "ruby -v"를 입력 후 엔터키를 치면 설치된 루비의 버전을 확인하실 수 있습니다.

이제 sass를 설치할 차례입니다. 아주 간단합니다.

위에서 열어놨던 창에서 다음과 같이 타이핑하면 sass를 설치합니다.

>gem install sass

(위의 > 는 치시는게 아니에요!!)

메시지가 출력되며 인스톨이 완료되면 제대로 인스톨이 됐는지 다시 한 번 확인해봅니다.

>sass -v

위 명령어를 실행하면 Sass version (selective steve) 라는 메시지가 출력됩니다. 그럼 sass가 정상적으로 설치된 것입니다.

일단 sass를 cmd창에서 사용할 수 있도록 설치가 완료되었습니다.

기본적으로 sass로 파싱하는 방법만 포스팅하고 이번 포스팅을 마치겠습니다. 이것도 아주 간단하지만 cmd창을 이용하셔야 합니다.

cmd에서 scss파일을 만들 위치로 이동합니다. 저는 E:\Project 내에 있으니 그곳으로 이동하겠습니다.

>e:

>cd project

해당 폴더에 만들어놓은 test.scss 파일이 있으므로 해당 파일을 컴파일 하여 css파일을 생성해보겠습니다.

E:\project>sass test.scss test.css

위의 명령어를 입력하시면 test.css 파일이 생성됩니다. 만일 scss 문법이 틀려 파싱이 되지 않을 경우 에러문구가 출력되니 에러는 직접 확인하시기 바랍니다.(빈 파일이라면 에러가 발생하진 않습니다.)

다른 명령어나 기능은 sass 홈페이지에서 확인하시기 바랍니다.

[SASS 홈페이지 바로가기]

다음글에서 scss 파일(sass 파일의 확장자)을 sublime text 3라는 에디터에서 사용할 수 있도록 플러그인을 설치하는 방법에 대해 알아보겠습니다. 읽어주셔서 감사합니다.