Compass & bourbon

Compass 확장팩

Compass 는 Sass 에서 활용하는 프레임워크입니다. 

CSS3, 타이포그래피, 그리드, 레이아웃 등 미리 정의된 스타일 모듈을 불러와서 사용할 수 있습니다.

Compass 장점

ㆍ 표현을 위한 class 속성을 사용하지 않고도 의미있는 마크업이 가능합니다.

ㆍ 재사용 가능한 웹 디자인 모듈이 유용하게 쓰일 수 있습니다.

ㆍ Spites 이미지를 손쉽고 빠르게 만들어 사용할 수 있습니다.

ㆍ Compass 에서 제공되는 CSS3 믹스인을 활용하면 코드 작성이 쉬워집니다.

ㆍ 아름다운 타이포그래피를 제공합니다.(우리나라 현실에서는 그닥...ㅠ)

Compass 명령어 알아보기

gem install compass
compass --version or compass -v
compass --help or compass -h

명령창에 gem install compass 를 입력하면 compass 가 설치됩니다.(맥에서 오류가 난다면 sudo 가 필요)

compass -v 는 설치된 콤파스의 정보,버전을 볼 수 있습니다.

compass -h 는 콤파스의 명령어 도움말 정보를 볼 수 있습니다.

compass init or compass create [Project]

compass init 명령어를 실행하게 되면 해당 디렉토리 폴더에 콤파스를 빌드하기 위한 ruby 파일인 config.rb(콤파스 구성파일)와 기본 sass, css 디폴트 파일 그리고 sass를 캐시하기 위한 sass-cashe 파일이 생성되어집니다.

compass create 폴더명 => 폴더를 지정한 후 해당 폴더에 init 명령어와 같은 일을 수행합니다.

다시 말해, 위의 두 명령어는 Compass  프로젝트 템플릿을 생성하는 것입니다.

gem list compass

compass 모듈 리스트의 버전을 확인 할 수 있습니다.

compass install compass

콤파스에서 기본으로 제공되는 파일 템플릿을 제공합니다

compass create [Project] --bare

compass init or compass create 를 실행하면 템플릿에 불필요한 파일들이 생성됩니다. 

기본적인 템플릿을 제공해 주지만 불편하기 때문에 위와 같은 옵션 --bare 를 이용하면 sass 폴더와 config.rb 파일만 생성할 수 있습니다.

config.rb (기본 구성 파일 설정)

# Compass 설정 참고자료
# http://compass-style.org/help/documentation/configuration-reference/

  require 'compass/import-once/activate'
# Sass Add-on 호출
  require 'bourbon'


# 프로젝트 빌드 설정
# 빌드(배포) 시에 사용되는 옵션
# 기본 설정: environment = :development
# environment = :production

# 프로젝트 디렉토리 설정
  http_path       = "/"
css_dir         = "css"
sass_dir        = "sass"
images_dir      = "images"
javascripts_dir = "js"
fonts_dir       = 'fonts'

# 기본 언어 인코딩 설정
# Windows 사용자에게 주로 발생하는 오류(언어 인코딩: CP949)
Encoding.default_external = "utf-8"

# 코드 출력 스타일 방식 설정
# :expanded
# :nested
# :compact
# :compressed
  output_style = (environment == :production) ? :compressed : :expanded

# 상대 경로를 사용할 것인지 설정
# relative_assets = true

# Sass -> CSS 컴파일 디버깅 주석 유무 설정
        line_comments = false


# Sass 또는 Scss 문법 우선 적용 설정 유무
  preferred_syntax = :sass


# 소스맵 사용 유무 설정
# sourcemap = false

# Sass 옵션 설정
# sass_options = {
#     :cache => false,
#     :cache_location => 'path'
# }

compass watch or compass w

sass watch 와 같이 compass 도 명령창에서 config.rb 파일이 있는 디렉터리로 이동한 후 compass watch 를 하면 컴파일이 됩니다.

단축 표현은 compass w 입니다.

@ compass watch 를 할 때 주의사항

명령창에서 compass config 를 하면 config.rb 파일이 생성되는 것이 아니라 config 폴더내의 compass.rb 파일이 생성됩니다.

이 경우 compass watch 는 compass.rb 파일이 있는 기준 경로에서 watch를 실행하는 것이 아니라 그 상위 디렉토리인 config 폴더가 있는 디렉토리 경로에서 compass watch 를 해야합니다.

compass config 를 사용하지 않고 config.rb 를 생성하여 할 경우는 루비파일이 있는 기준 경로에서 compass watch 를 실행

bourbon

@ compass 가 프레임워크라면 bourbon 은 라이브러리(Mixin 을 위한)입니다.

bower i compass-mixins

을 실행하여 콤파스 믹스인 코드들을 다운 받은후에 본인이 쓰려고 하는 믹스인 코드들만 가져다 사용할 수 있습니다.

Jaehee's WebClub