콤파스 구성파일 작성하기(Ruby-based Configuration Reference)

Ruby-based Configuration Reference

compass 구성파일(.rb)은 sass 로 할 수 있는 설정보다 영리하고 더 많은 일들을 할 수 있습니다.

이 구성파일은 사용자의 프로젝트를 설정하는데 간단,편리함을 제공해 줍니다.

[참고] 

콤파스 설정 참고: Compass Documentaion

기본 구성방식(Basic format)

대부분의 구성 속성들은 간단한 프로퍼티를 배치하는 방식입니다. 

예를 들어, 아래와 같은 방법입니다.

css_dir = "stylesheets"

대부분의 .rb 파일을 구성하는 속성은 기본 타입값을 가지고 있으며 속성에 설정될 수 있는 기본타입에는 세가자 타입이 있습니다.

타  입	내  용
String	single or double quotes 를 사용한 텍스트.  예) "문자열", '문자열'
Symbol	심벌(기호)는 콜론으로 시작하면서 공백없이 사용합니다. 심벌은 설정을 한정된 가능한 값을 나타내는데 사용됩니다.  예)  :foo,  :bar
Boolean	true or false

여러가지의 값을 구성할 수 있는 합성값은 다음과 같은 타입이 있습니다.

타  입	내  용
Array	배열은 대괄호로 감싼 기본 값을 쉼표로 구분된 리스트입니다. 예) ["one", "two", "three"]
Hash	해시는 하나의 값에 연관된 값을 매핑하고  => 로 값을 구분,분리합니다. {:foo => "aaa", :bar => "zzz"}

Comments(주석)

파일 내의 주석기호는 #(hash sign) 을 사용합니다

Loading Compass Plugins ( 콤파스 플러그인 로드하기)

콤파스 코드는 다른 라이브러를 로드하는 매커니즘은 루비에 의존하며, 콤파스와 호환되는 플러그인을 로드하려면 .rb 파일의 상단에 작성해야 합니다.

그리고 사용자가 다른 라이브러리에 접근하기 위해 -r 옵션을 사용하여 프로젝트를 생성하게 되면 이미 설정되어 있게 됩니다.

require 'bourbon'
require 'susy'

구성파일 덮어쓰기(Overriding Configuration Settings)

콤파스 구성파일(.rb)에 설정된 구성옵션은 command line(CLI:명령창)를 통해 실행되는 경우 구성 옵션 설정을 재정의할 수 있습니다.

아래와 같이 구성파일에 구성옵션이 이미 설정되어 있으며 명령창에서 콤파스 명령어를 사용한다고 가정해 봅시다.

명령창 실행

$ compass compile -e production --force

구성파일 내의 구성옵션이 다음과 같다면

output_style = (environment == :production) ? :compressed : :expanded

위와 같은 경우에 명령창에서 compass 명령어를 실행하면 구성설정 파일의 옵션들을 검사하게 되고, CLI(명령창)에서 설정되지 않은 값들은 기본값을 가지게 될 것입니다.

구성파일내의 옵션 설정하기

다음과 같은 config.rb 파일이 있다면 아래와 같이 옵션을 구성할 수 있습니다.

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

# ------------------------------------------------------------------------
# Compass 플러그인 추가 
require 'compass/import-once/activate'
require 'bourbon'
require 'susy'


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

# ------------------------------------------------------------------------
# 개발 또는 빌드 여부 환경설정
# :development
# :production
environment = :development


# ------------------------------------------------------------------------
# file-path 상대 경로 지정 설정 (localhost 작업시 상대 경로로 지정)
# relative_assets = true


# ------------------------------------------------------------------------
# 프로젝트 폴더 경로 지정
# ------------------------------------------------------------------------

http_path       = "/"
css_dir         = "css"
css_path        = ""
sass_dir        = "sass"
images_dir      = "images"
# images_path   = "/"
# fonts_dir      = "fonts"


# ------------------------------------------------------------------------
# SASS => CSS 변경 시에 변경되는 아웃풋 스타일 설정
# :expanded
# :nested
# :compact
# :compressed
# output_style = :expanded
output_style = (environment == :production) ? :compressed : :expanded


# ------------------------------------------------------------------------
# Sass 선호 문법 설정
  preferred_syntax = :scss

# ------------------------------------------------------------------------
# Sourcemap 사용 유무
sourcemap = false

# ------------------------------------------------------------------------
# sass-cache file 사용 유무
cache = false

위와 같은 구성옵션들 외의 configuration properties 를 조금더 자세히 살펴보도록 하겠습니다.

콤파스 구성 옵션(다음 포스팅) : configuration properties

Jaehee's WebClub