compass 고급 스프라이트 사용 패턴

Advanced Compass CSS Sprite

앞선 포스팅에서 Compass Basic Sprite 에 대해 알아보았으며 이 글에서는 좀 더 고급 사용이 가능한 Compass helper 인 CSS Sprite 에 대해 알아보는 시간을 가져보겠습니다.

 

Compass의 스프라이트 고급 패턴을 사용하려면 Compass 에서 제공되는 functions(Helpers for Compass) 및 Mixin을 사용합니다.

이 고급 패턴 역시 png만을 지원하고 있습니다.

CSS Sprite Helpers for Compass

sprite-map($glob, ...)

sprite-map() 은 개별 스프라이트 이미지를 병합된 스프라이트 이미지를 생성하도록 도와줍니다.

SCSS

$icons: sprite-map("icons/*.png");
background: $icons;

위의 코드와 같이 사용자 변수를 설정하고 스프라이트로 사용하기 위한 개별 이미지(png)가 있는 폴더를 지정하고 background 에 sprite-map()을 통해 생성된 값을 지정하여 주면 CSS는 아래와 같은 코드를 생성하게 됩니다.

다시 말해, $glob 패턴과 일치하는 파일에서 CSS 스프라이트를 생성하게 됩니다.

CSS

background: url('/images/sprites/icons-a2ef041.png?1234678') no-repeat;

path 상에서 sprites 폴더는 사용자 지정이 없다면 기본 sprites 폴더가 생성되어 병합된 이미지가  이 폴더안에 생성되게 됩니다.

그리고 병합된 png 파일은 개별 스프라이트를 추가,삭제시 새로운 png파일 네이밍으로 생성되게 됩니다.

만약 병합된 이미지가 생성될 폴더를 사용자 지정하고 싶다면 rb 파일에서 설정이 가능합니다.

이는 Compass 구성파일을 참고하세요.

또한, $glob 패턴 이후의 두번째 인자부터는 repeat 속성과 병합 이미지의 레이아웃설정, 간격등을 설정할 수 있습니다.

SCSS

$icon-sprite: sprite-map("icons/*.png", $layout: horizontal, $spacing: 50px, $repeat: no-repeat);

위와 같이 정의하면 병합된 이미지는 수평, 이미지들 사이의 간격은 50px을 유지하면서 이미지는 반복되지 않을 것입니다.

옵션값의 기본값은 position은 0%, spacing은 0px, repeat은 no-repeat 입니다.

sprite($map, $sprite, $offset-x, $offset-y, $use-percentages)

sprite() 는 싱글 단축속성을 사용하여 이미지와 배경이미지의 위치값을 반환합니다.

scss

$icon-sprite: sprite-map("icons/*.png"); // twitter.png 파일이 있을 경우에
.demo-02 {
  width: sprite-width($icon-sprite, twitter);
  height: sprite-height($icon-sprite, twitter);
  background: sprite($icon-sprite, twitter) no-repeat;

  // Using percentage
  // background: sprite($icon-sprite, twitter, 0, 0, true) no-repeat;
}

위 코드와 같이 twitter.png 가 있다면 해당 이미지에 대한 위치값이 설정되면서 스프라이트 CSS가 생성되고 $use-percentage의 값을 true로 설정하게 되면 px 대신에 위치값을 %로 변환하여 줍니다. 대신 $offset-x,y의 값은 0으로 지정해야 합니다.

그리고 생성된 background-position 값이 400px 10px 일 경우에 해당 $offset-x,y 값을 사용자 지정 px을 전달하면 먼저 생성된 포지션값에 플러스,마이너스하게 됩니다.

하지만 %로 전달하게 되면 전달한 사용자 인자값 %(percentage) 그대로 컴파일되게 됩니다.

sprite-width($map), sprite-height($map)

sprite-width(), sprite-height() 는 생성된 스프라이트의 넓이, 높이값을 반환합니다. 

sprite-path($map)

sprite-path()는 병합 생성된 스프라이트 이미지의 파일시스템의 경로를 반환합니다.

• E.g. file:///F:/susy&compass-study/images/icons-sede906f26a.png

scss

$icon-sprite: sprite-map("icons/*.png");
$file-path: sprite-path($icon-sprite);
@debug "#{$file-path}";
// 디버깅 결과 : file:///F:/susy&compass-study/images/icons-sede906f26a.png

sprite-names($map)

sprite-names()은 map(list)의 모든 스프라이트 목록의 네이밍을 반환합니다. 

(스프라이트 생성시 제공된 모든 스프라이트 이미지 이름의 리스트를 반환)

스프라이트로 생성한 이미지가 ico-01.png, ico-02.png, ico-03.png 가 있다면 map 타입으로 ico-01, ico-02, ico-03 을 반환합니다.

scss

$icon-sprite: sprite-map("icons/*.png"); // facebook.png, facebook_hover.png, twitter.png, twitter_hover.png
$sprite-names: sprite-names($icon-sprite);
@debug "#{$sprite-names}"; // facebook, facebook_hover, twitter, twitter_hover 를 반환

위와 같이 리스트로 반환되는 값을 이용하면 개별적인 CSS Sprite 가 용이해집니다.

아래 코드는 sprite-names() 과 @each ~in 반복문을 사용하여 유지보수가 수월하도록 작성할 수 있습니다.

scss

$sprite-map: sprite-map("one/*.png"); // ball, bus, check

@each $image-name in sprite-names($sprite-map) {
  .#{$image-name} {
    @include one-sprite($image-name);
    width: one-sprite-width($image-name);
    height: one-sprite-height($image-name);
  }
}

css

.ball {
  background-position: 0 -46px;
  width: 46px;
  height: 46px;
}

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

.check {
  background-position: 0 -138px;
  width: 68px;
  height: 68px;
}

sprite-map-name($map)

sprite-map-name() 은 CSS 스프라이트가 포함되어 있는 폴더의 네이밍을 반환합니다.

scss

$map-name: sprite-map-name($icon-sprite);
$icon-sprite: sprite-map("icons/*.png");
.demo-01 {
  content:"#{$map-name}"; // icons
}

sprite-file($map, $sprite)

sprite-file()은 스프라이트를 생성할 때 사용된 원본 파일의 경로를 반환합니다. (E.g. icon/facebook.png)

이 함수를 이용하면 image-width(), image-height() 에 전달하기에 유용,적합합니다.

scss

$icon-sprite: sprite-map("icons/*.png");
.demo-03 {
  $sprite-file: sprite-file($icon-sprite, facebook);
  @debug "#{$sprite-file}";
  width: image-width($sprite-file);
  height: image-height($sprite-file);
}

sprite-url($map)

sprite-url()은 background 속성에서 사용되는 url을 반환합니다.

scss

$icon-sprite: sprite-map("icons/*.png");
$url: sprite-url($icon-sprite);
@debug "#{$url}"; // url('/compass/images/icons-sede906f26a.png')

sprite-position($map, $sprite, $offset-x, $offset-y, $use-percentages)

sprite-position()은 스프라이트 이미지의 위치를 반환하기 때문에 배경 좌표(위치)값으로 사용하기에 적합합니다.

x, y 좌표를 전달하면 현 배경좌표에서 +,- 하여 계산됨.

스프라이트 맵을 통한 배경 좌표가 background-position: 10px 10px; 이라면

sprite-position($map, $sprite, 4px, -2px) 을 설정 시

background-position: 14px 8px 의 결과값을 반환

scss

$icons: sprite-map("icons/*.png"); // new 가 있는 경우
#demo {
  background-position: sprite-position($icons, new, 3px, -2px);

  // %(percentage) 단위를 사용하려 할 경우 좌표는 0,0 마지막 인수는 boolean을 true로 설정한다.
  // background-position: sprite-position($icon-sprite, new, 0, 0, true);
}

Jaehee's WebClub