[SASS] Sass란 / 간단하게 설치하기 / vscode scss 설정 / 파셜(partial)파일

1. Sass란?

Sass는 CSS 전처리기입니다.

CSS의 단점을 보완하여 보다 가독성이 높고 코드의 재사용성이 유리합니다.

CSS의 문법은 배우기가 쉬워 프로젝트의 규모가 작을 때는 문제가 없어보이지만, 프로젝트의 규모가 커지면 수정이 빈번히 발생하게 되면 코드가 지저분해지고 유지보수가 어려워지는 단점을 가지고 있습니다.

Sass는 보다 심플한 표기법과 CSS를 구조화하여 표현할 수 있습니다.

2. 설치하기(window)

1) 먼저 루비언어를 설치해줍니다. (without dev 최신버전으로)

https://rubyinstaller.org/downloads/

2) cmd 창에서 gem install sass 입력해서 sass를 설치해줍니다.

3) sass -v 로 설치된 버전 정보를 확인해줍니다.

3. vscode 설정

vscode에서 scss파일이 변경될 때마다 자동으로 감지하여 scss 파일을 컴파일하여 css 파일을 자동으로 변환해주기 위한 설정을 해야합니다.

먼저 css폴더 안에 style.css와 scss폴더 안에 style.css를 만들어주세요.

그리고 view탭에서 terminal로 들어가줍니다.

terminal에서 sass --watch scss/style.scss:css/style.css 입력해주세요.

4. 파일 구조 _ 파셜(partial)파일

파셜(partial).scss파일은 .css 파일로 컴파일 되지 않습니다.

파일을 불러오고 합치는 역할을 합니다.

대신 파셜(partial).scss 파일은 이름 앞에 _(언더바)를 꼭 붙여주어야 합니다!

그리고 메인 scss파일 안에 @import "폴더이름/파셜(partial)파일 이름" 으로 연결해주여야 합니다.

*파일 이름 뒤에 scss를 붙이지 않습니다.