Compass 를 이용한 스프라이트(Spriting with Compass)

Spriting with Compass

스프라이트 기법은 Compass 와 함께 이용하면 보다 쉽게 사용할 수 있습니다.

스프라이트 이미지를 PSD 에서 배치하여 작업하지 않고도 스프라이트 이미지를 자동 배치하고 스타일시트를 생성할 수 있도록 도와줍니다.

Compass 에서 다음의 몇가지 방식을 사용하여 스프라이트를 사용하는 법을 알아보도록 하겠습니다.

Compass : Basic Spirte Tutorial

Setup(설정)

사용자의 폴더에 스프라이트로 사용할 PNG 이미지가 4개 있다는 전제하에 설명하도록 하겠습니다.

이미지 폴더의 구성은 다음과 같습니다.

• images/one/ball.png
• images/one/bus.png
• images/one/check.png
• images/one/coupon.png
• images/one/new.png

폴더를 구성할 때 주의할 점은 스프라이트로 사용할 이미지들을 한 폴더로 구성해야 합니다.

예를 들어 위와 같이 one 폴더내에 있는 각각의 이미지들은 Compass 를 통해 한 이미지(스프라이트이미지)로 생성되기 때문에 다른 스프라이트를 필요할 시에는 또 다른 폴더(e.g. two/icon-01.png, two/icon-02.png)를 구성해야한다는 것입니다.

Basic Usage(기본 사용법)

위와 같이 여러분의 스프라이트로 사용할 png 가 one 폴더내에 포함하고 있다면 Compass 에서 간단하게 스프라이트 이미지를 생성할 수 있습니다.

Sass 파일에 다음과 같이 작성합니다.

# Sass/Scss

// * ----------------------------------------------------------------
// * Compass 스프라이트 이미지 생성
// * 사용자 png 이미지 폴더를 지정하면 스프라이트 이미지를 생성한다.
@import "compass/utilities/sprites";
@import "one/*.png";

여러분의 configuration file 에 Compass 에 관한 라이브러리를 require 하고 있다면 @import "compass/utilities/sprites"; 를 임포트해 주지 않아도 됩니다.

반대로 sprite 콤파스 라이브러리만을 import 해서 사용하려한다면 위와 같이 작성하면 됩니다.

@import "one/*.png" 만으로도 스프라이트 이미지를 생성하게 됩니다.

이 후에 스프라이트 스타일시트를 생성하기 위해 아래와 같이 스프라이트 믹스인을 호출합니다.

// * ---------------------------------------------------------------------------------------
// * keyword : @include all-이미지폴더-sprites
// * 각각의 스프라이트 이미지에 대한 CSS 클래스를 제공하기 위해 이미지 폴더명을 제공 
// * 예) -one-
// * CSS Class output 은 이미지폴더명(접두어) + 이미지 네이밍으로 제공된다
// * 문제점: width, height 생성하지 않는다.
@include all-one-sprites;

위와 같이 개별 스프라이트이미지들이 포함되어 있는 폴더명을 사용하여 믹스인을 호출하게 되면 아래와 같은 CSS Output 이 출력됩니다.

# Sass/Scss

.one-sprite, .one-ball, .one-bus, .one-check, .one-coupon, .one-new {
  background-image: url('/susy&compass-study/images/one-s6aa6b138ae.png');
  background-repeat: no-repeat;
}

.one-ball {
  background-position: 0 0;
}
.one-ball:hover, .one-ball.ball-hover {
  background-position: -56px 0;
}

.one-bus {
  background-position: -102px 0;
}

.one-check {
  background-position: -184px 0;
}

.one-coupon {
  background-position: -252px 0;
}

.one-new {
  background-position: -282px 0;
}

위의 스타일시트는 저의 로컬을 기준으로 생성된 것임을 감안해주세요.

코드에서 알 수 있듯이 images 폴더에 one-s6aa6b138ae.png 이라는 스프라이트 이미지가 자동생성되고,  

폴더명+각각의 스프라이트이미지명으로 CSS class 가 생성되어 스타일시트를 구성하게 됩니다.

참고로 생성된 스프라이트 이미지명은 compass clean 을 한 후 다시 watch 를 하면 새로운 스프라이트 이미지명으로 업데이트됩니다.

그리고 개별 스프라이트 이미지를 추가하더라도 기존 스프라이트이미지가 제거되었다가 다시 생성될 것입니다.

Selector Control (CSS 선택자 제어)

위에서 보았듯이 CSS 클래스명까지 제어하여 생성해주기 때문에 일반적으로 사용자들에게 불편할 수 있기 때문에 Compass 는 CSS Selector 를 컨트롤할 수 있도록 또 다른 믹스인을 제공하고 있습니다.

// 직접 스프라이트 이미지 모듈 생성
.demo {
  .bg-01 { @include one-sprite(ball);}
  .bg-02 { @include one-sprite(bus);}
  .bg-03 { @include one-sprite(check);}
  .bg-04 { @include one-sprite(coupon);}
}

위의 믹스인의 이름은 여러분이 스프라이트 이미지를 배치한 폴더이름에 의존하고 @param 은 사용하고자 하는 개별 스프라이트 이미지명입니다.

Sass Functions

지금까지 알아본 스프라이트 믹스인은 해당 스프라이트에 대한 demension(크기)인 width, height 값을 제공해주지 못하는 문제점을 가지고 있습니다.

하지만 <map>-sprite-width, <map>-sprite-height 이라는 마법적인 demensition functions 을 제공해주고 있습니다.

눈치채셨을지도 모르겠지만 <map> 은 자바스크립트의 객체와 유사합니다. 

리스트라고 생각하시면 되고 Compass 스프라이트 믹스인을 실행하면 각각의 png 리스트를 제어하게 됩니다.

# Sass/Scss
.img-ball {
  @include one-sprite(ball);
  width: one-sprite-width(ball);
  height: one-sprite-height(ball);
}

.img-bus {
  @include one-sprite(bus);
  width: one-sprite-width(bus);
  height: one-sprite-height(bus);
}

# CSS Output
.img-ball {
  background-position: 0 0;
  width: 46px;
  height: 46px;
}

.img-bus {
  background-position: -102px 0;
  width: 82px;
  height: 82px;
}

Customization Options(스프라이트 사용자 옵션들)

스프라이트의 사용자 옵션은 스프라이트 맵 또는 개별적인 이미지에 대한 기본값을 변경(생성,동작을 제어)할 수 있는 구성 옵션은 물론이고  스타일시트의 동작까지도 제어할 수 있습니다.

ㆍ $sprite-selectors - magic sprite selectors 참고바랍니다.

ㆍ $disable-magic-sprite-selectors - magic sprite selectors의 사용유무를 제어합니다. true는 magic selectors를 사용하지 않도록 설정. Default : false

ㆍ $default-sprite-separator - 스타일시트의 스프라이트 제어시 네이밍사이의 구분자를 제어

magic selector

특별한 선택자를 사용하기 위해서는 스프라이트 디렉토리 내의 파일 이름에 _hover, _active, _target 를 추가하여 사용합니다.

예를 들어, menu_01.png 라는 이미지가 있으며 그에 대한 hover 나 active 이미지가 있다면 이미지 파일이름을  menu_01_hover.png, menu_01_active.png 로 구성합니다.

이렇게 이미지네이밍을 정한 것 만으로도 콤파스의 스프라이트는 마법과 같은 동작을 수행하게 됩니다.

•  my-buttons/glossy.png 
•  my-buttons/glossy_hover.png 
•  my-buttons/glossy_active.png 
•  my-buttons/glossy_target.png

위와 같은 디렉토리 구조내에서 아래와 같은 Sass 코드를 추가한다면 : 

@import "my-buttons/*.png";

a {
  @include my-buttons-sprite(glossy)
}

여러분의 스타일시트는 다음과 같이 컴파일 될 것입니다.

.my-buttons-sprite, a {
  background: url('/my-buttons-sedfef809e2.png') no-repeat;
}

a {
  background-position: 0 0;
}
a:hover, a.glossy_hover, a.glossy-hover {
  background-position: 0 -40px;
}
a:target, a.glossy_target, a.glossy-target {
  background-position: 0 -60px;
}
a:active, a.glossy_active, a.glossy-active {
  background-position: 0 -20;
}

컴파일된 CSS를 보면 :hover, <.map>_hover, <.map>-hover 로 사용자 선택에 맞게 사용할 수 있습니다.

그리고 전역스코프 및 지역스코프에서 $disable-magic-sprite-selectors 를 사용하면 위와 같은 magic selectors 는 실행하지 않습니다.

// 스타일시트의 스프라이트 제어시 네이밍사이의 구분자를 제어
$default-sprite-separator: "_";
a {

  $disable-magic-sprite-selectors:true;
  @include my-buttons-sprite(glossy)
}

그 외의 옵션들

ㆍ $<map>-<sprite>-spacing

ㆍ $<map>-<sprite>-repeat

ㆍ $<map>-<sprite>-position

위의 옵션들은 스프라이트 이미지 생성시에 간견, 반복, 위치를 제어할 수 있도록 도와줍니다.

// 이미지 병합 시, 이미지 사이 간격, 반복, 위치 설정
$one-ball-spacing: 10px;
$one-bus-position: 100%;

위의 옵션외에 고급사용(sprite-map 믹스인)에 필요한 옵션도 있습니다.

Compass : Customization Options

Controlling layout(스프라이트 레이아웃 제어)

콤파스는 스프라이트 이미지 생성에 관한 몇가지 레이아웃 방식을 지원하고 있습니다.

// Using import...
$toolbar-spacing: 5px;
$toolbar-layout: 'smart';
@import "toolbar/*.png";


// Or, if you are using a sprite map...
$icons: sprite-map("toolbar/*.png", $spacing: 5px, $layout: diagonal);

스프라이트 레이아웃은 위와 같이 4가지 레이아웃을 제공하고 있으며 이미지 병합시 간격과 정렬을 정의할 수 있습니다.

그리고 주의해야할 사항 중에 layout 을 smart 로 설정할 시 spacing 은 제어할 수 없다는 것입니다. (스마트하게 레이아웃이 설정되기 때문에 간격을 제어할 필요가 없다는 의미인 것 같습니다.)

다음 포스팅에서는 스프라이트 맵의 고급사용에 대해 다뤄보도록 하겠습니다.

위의 레이아웃을 설정하는 코드에서 잠깐 보았듯이 helper functions 인 sprite-map 이라는 고급사용법을 지원해 주고 있습니다.

참고 자료 : Spriting with Sass and Compass

스프라이트 고급 사용 : helper function Sprite-map

Jaehee's WebClub