Sass/Scss Compass Setting

또 한번 뼈저리게 느낀. 

경로에는 한글이 들어가 있으면 안된다는 점.

Package Installer 가 설치되어 있다는 점을 전제로. 또 입문자가 아니라는 점을 전제로 설명합니다.

1. Ruby 설치 및 환경 설정

2. Sass, Compass 설치

3. Sublime Text 에 Package 설치

4. 추가 환경 설정

1. Ruby 설치

http://rubyinstaller.org/

그리고 C:\Ruby(버젼별로 폴더이름 다름)\bin 을 시스템 변수 Path 에 추가한다

2. Sass, Compass 설치

cmd 에서 아래와 같이 쳐서 설치한다.

gem install sass

gem install compass

3. Sublime Text 에 Package 설치

Package Installer에서 아래 몇 가지의 Package 를 설치한다.

Sass  

Sass Build 

Scss 

Compass  

4. 추가 환경 설정

보통 개발할 때 다음과 같은 디렉토리 구조로 세팅한다.

project

css

style.css

scss

style.scss

컴파일러가 scss 파일을 컴파일하여 css 폴더 밑으로 파일을 생성해야 한다.

그러므로 컴파일러 옵션에 추가적으로 환경 설정을 한다.

Preferences>Browse Packages 로 설치된 Package 폴더를 연다.

Sass Build 폴더로 들어가 Sass 와 Sass-compress 의 빌드 세팅 파일인 .sublime-build 을 연다.

아래와 같이 수정한다.

{
	//"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
	"cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
	"selector": "source.sass, source.scss",
	"line_regex": "Line ([0-9]+):",

	"osx":
	{
		"path": "/usr/local/bin:$PATH"
	},

	"windows":
	{
		"shell": "true"
	}

}

Compass Build 의 경우엔 조금 까다롭다.

환경 설정 파일을 프로젝트에 새로 생성해야 한다.

project

css

style.css

scss

style.scss

config.rb << compass build 용 환경 설정 파일

그리고 내용은 아래와 같다.

http_path = "/"
css_dir = "css"
sass_dir = "scss"
output_style = :compressed
line_comments = true

참고로 output_style은 :compressed 말고도 nested 등 많이 있는 것 같다.

아직 css나 ruby를 잘 몰라서 이에 대해 더 쓰긴 힘들 것 같다.

여기까지. 웹 코딩도 시간 오래 걸릴텐데 세팅만 하루 종일 하는 것 같다.