[사스(Sass)] 1. Sass 란 무엇인지 + 설치

잡코리아, 사람인 등의 구인구직 사이트에서 퍼블리셔, 프론트엔드(Front-end)개발자 등으로 검색했을때 가끔씩 필요 스킬로 이 Sass가 언급됩니다.

도데체 이 Sass가 뭐길래 필요 스킬로 요구되는걸까 해서 간단히 사용방법을 포스팅 하려 합니다.

일단 뭔지 알아야 쓰고싶을 때 쓰니까 Sass가 뭔지 이론을 간단히 남깁니다.

뭐 css 전처리기다. 전처리기는 또 뭔데... 하고... 정말 알기 쉽게 적습니다.

(전처리기란 참고로 전에 처리하는 기능이 있다고 해서 전처리기 라고 합니다. css 전처리기 라고 하면 css 파일을 수정 또는 생성하기 전에 어떠한 작업(컴파일)이 일어나죠.)

Sass는 css 속성(margin, padding, position, color)의 '값'을 자바스크립트의 변수처럼 활용합니다.

근데 굳이 뭐 이걸 변수로 지정해서 뭐 어쩔껀데? 오히려 변수로 지정하는 부분이 더 번거롭지 않을까? 라고 생각하실 수 있습니다.

하지만 이 Sass에서 주목해야 할 부분은 반복적인 작업을 간소화 시켜준다는 것에 있습니다.

예를들어 이런식으로 똑같은 스타일이 다른 영역에 뿌려져야 할 때?

.btn{
margin-left: 10px;
color: #ffddff;
position: relative;
}
.list{
margin-left: 10px;
color: #ffddff;
position: relative;
}
.box{
margin-left: 10px;
color: #ffddff;
position: relative;
}

저만한 코드 복사해서 붙혀쓰고 어딨는지 모르면 컨트롤 + F 로 검색해야 하고, 개발자 모드 켜서 마우스로 찍어봐서 찾고

이런 반복적인 작업이 쌓이면 작업 속도 또는 능률(개개인에 따라 다르겠...)에 차이와 지장이 생길 경우가 발생하겠죠..

하지만 이런 반복적인 부분을 단 변수 한방에 해결이 된다면? 예를 들면.. 이렇게?

@mixin 변수명{
    margin-left: 10px;
    color: #ffddff;
    position: relative;
}

.btn{
    @include 변수명;
}
.list{
    @include 변수명;
}
.box{
    @include 변수명;
}

어때요? 저는 확실히 이뻐보이기도 하고 이렇게 활용해서 css를 관리한다면 깔끔하고 칭찬 받을 만 하네 생각 듭니다.

이렇게 보니 그렇게 또 뭐 어려워 보이지도 않는거 같네요. 하지만 이 글은 이론과 설치법만 담고 있습니다.

Sass 설치

1. 사스는 'Ruby'라는 프로그래밍 언어가 설치되어 있어야 합니다.

근데 맥은 이 루비가 이미 설치되어 있다고 하네요.

윈도우OS를 쓰시는 분들은 직접 설치하셔야 합니다.

http://rubyinstaller.org/downloads/

여기서 설치를 할 수 있습니다. 위 주소로 들어가 보시면 이러한 페이지가 뜹니다.

여기서 RubyInstallers 라고 맨 위에 있는 게 보이실 꺼예요. 거기서 가장 최근 버전이 2016년 08월 25일 기준으로 Ruby 2.3.1 이네요.

여기서 가장 최신의 루비 본인 컴퓨터의 사양에 맞게 설치하시면 됩니다. 저는 64비트라 (x64)가 붙은걸 다운받았습니다.

2. 다운받고 다운받은 파일을 실행시켜면 언어를 선택하는 창이 뜹니다. 영어와 일본어가 있는데 저는 영어로 설치하겠습니다.

3. 라이선스에 동의한다라는 선택을 해주셔서 Next버튼을 누를 수 있게 합니다.

4. 어디에 설치할 껀데? 라고 묻네요. 그럼 그냥 원래 적혀져 있던곳으로 저는 놔뒀습니다.

하지만 여기서 체크할 것이 3가지나 있습니다.

첫번째는  Td/Tk 지원을 설치할래? 묻는건데 저는 저게 뭔지 몰라서 체크 안했습니다.

두번째는 Ruby경로를 PATH에 등록할래? 묻는건데 이건 필요한 부분이라 체크했습니다.

세번째는 Ruby와 관련된 .rb 와 .rbw 파일을 설치할래? 역시 뭔지 몰라서 설치 안했습니다.

두번째만 체크 했습니다. 그리고 하단의 Install 버튼을 눌러주세요.

5. 설치가 완료되면 Finish버튼을 눌러 설치를 마무리 합니다.

6. 이제 루비가 제대로 설치되었다면 제대로 설치가 됬는지 확인을 합니다.

cmd 창을 열어야 하는데 단축키는 윈도우버튼 + R -> cmd 입력 -> 엔터

또는 아래 스샷처럼 접근하셔도 됩니다.

(시작 -> 모든 프로그램 -> 보조프로그램 -> 명령프롬프트 클릭)

7. cmd 창에서 다음과 같이 입력하면 Ruby의 버전을 확인할 수 있습니다.

ruby --version

8. Ruby를 설치했다면 이제 Sass 설치로 설치는 마무리 합니다. Sass 설치 명령어는 다음과 같습니다.

gem install sass

만약 이 명령어를 입력 후 액세스 허용 창이 뜨면 허용해주시면 됩니다.

(설치가 완료된 모습)

※ 일부 PC에서는 Sass설치시 에러가 발생한다고 합니다.

그럴때는 다음의 명령을 입력해 보시기 바랍니다.

gem sources -r https://rubygems.org/

gem sources -a http://rubygems.org/

입력후 gem install sass 재입력

사용법 등의 내용은 다음 포스팅 에서 진행하겠습니다.