본문으로 바로가기


Spriting with Compass

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

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


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







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-selectorsmagic 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



댓글을 달아 주세요

  1. 미드킹 2016.01.14 09:32

    상당히 만족스러운 글이네요~ ㅋ
    compass는 한글로 설명해 놓은 글이 많이 없어서 끙끙거리고 있었는데~
    좋은 정보 감사드립니다. 공부에 많은 도움이 될 것 같아요~ㅋㅋ
    감사합니다.