CODEWITHSUNDEEP
compass-sasscss-sprites
Andrea Sciamanna
Andrea Sciamanna

Reputation: 1474

<map>-sprite-height and <map>-sprite-width not being translated

Following the Spriting with Compass page instruction about the magical dimension functions, I'm trying to set the sizes of each sprite, using something like that:

  .top-bar-section {
    ul {
      & > li {
        // Generate the sprite map.
        $menu_icons-sprite-map: sprite-map("menu_icons/*.png", $layout: smart);

        // Set the background image.
        & > a:before {
          background: sprite-url($menu_icons-sprite-map) 0 0 no-repeat;
          display: inline-block;
          content: "";
          @include background-size(cover);
        }

        // Set the background position for each sprite.
        $menu_icons-sprite-names: sprite-names($menu_icons-sprite-map);
        @each $name in $menu_icons-sprite-names {
          &.menu_icons-#{$name} > a:before {
            background-position: sprite-position($menu_icons-sprite-map, $name);
            $height: menu_icons-sprite-height($name);
            $width: menu_icons-sprite-width($name);
            height: $height;
            width: $width;
          }
        }
      }
    }

However, the produced CSS looks like that:

...
.top-bar .top-bar-section ul > li.menu_icons-omino_001 > a:before {
  background-position: 0 0;
  height: menu_icons-sprite-height(omino_001);
  width: menu_icons-sprite-width(omino_001);
}
.top-bar .top-bar-section ul > li.menu_icons-omino_002 > a:before {
  background-position: 0 -64px;
  height: menu_icons-sprite-height(omino_002);
  width: menu_icons-sprite-width(omino_002);
}
...

It seems like the magical function is not created by Compass: am I missing something?

Upvotes: 1

Views: 924

Answers (1)

Russ Ferri
Russ Ferri

Reputation: 6589

When you use sprite-map to generate the sprite, the magic functions are not defined.

Luckily, Compass defines a sprite-dimensions mixin for this purpose:

@mixin sprite-dimensions($map, $sprite) {
   height: image-height(sprite-file($map, $sprite));
   width: image-width(sprite-file($map, $sprite)); 
}

In your SCSS you can simply include this mixin to set the right sizes:

&.menu_icons-#{$name} > a:before {
  background-position: sprite-position($menu_icons-sprite-map, $name);
  @include sprite-dimensions($menu_icons-sprite-map, $name);
}

If you need to work with the value of the height or width individually, use the same function calls as the mixin:

$height: image-height(sprite-file($menu_icons-sprite-map, $name));
$width: image-width(sprite-file($menu_icons-sprite-map, $name));

Upvotes: 2

Related Questions