Ruby를 이용한 SASS 설치 (SCSS to CSS 변환)

SASS는 CSS 속성(margin, padding, color등등)의 '값'을 자바스크립트의 변수 처럼 활용한다.

변수처럼 활용한다는 것은 반복적인 작업을 간소화 시켜준다는 점이다.

예를 들어 다음과 같이 똑같은 스타일이 다른 영역에 반복적으로 사용된다면...

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

다음과 같이 사용하면 작업이 간소화 될것이다.

@mixin 변수명{
    margin-left: 10px;
    color: #ffddff;
    position: relative;
}
.btn{
    @include 변수명;
}
.list{
    @include 변수명;
}
.box{
    @include 변수명;
}

* SASS 설치

SASS를 사용하려면 Ruby 가 설치 되어 있어야 한다. 맥은 기본으로 설치된다고 하고, 윈도우 사용자는 다운받아서 설치하자

경로 : https://rubyinstaller.org/downloads/

Ruby 설치 후 Command 창으로 들어가서 아래 명령을 수행한다.

gem install sass

이렇게 설치가 완료 된다.

*SASS 파일을 CSS 파일로 컴파일 하기

이제 SASS 파일을 CSS 파일로 변환하자 SASS 파일의 확장자는 SCSS 파일이다.

*한개의 파일 컴파일 방법

sass inpu.scss output.css

앞이 컴파일을 하는 scss 파일이고, 뒤의 파일이 컴파일 후 css로 생성되는 파일이다.

*SASS파일 자동 컴파일

sass --watch input.scss:output.css

매번 컴파일 하기는 힘들기 때문에 파일이 변경되면 자동으로 컴파일 하도록 설정할 수 있다.

위의 명령어는 input.scss 파일이 변경될 때마다 자동으로 output.css 파일을 생성한다.

*폴더를 대상으로 자동 컴파일

sass --watch src/sass/:public/css

현재 폴더에 있는 src/sass 폴더의 자식폴더의 모든 .scss파일을 public/css 폴더에 경로를 맞춰서 컴파일이 된다.

--style 옵션을 통해 컴파일 스타일을 결정할 수 있다.

Options

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

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

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

- compressed : 모든 요소를 공백없이 컴파일

sass --watch --style compressed src/sass/:public/css

compact나 compressed를 일반적으로 사용할꺼 같다.