Spriting with Compassページの魔法のディメンション関数に関する指示に従って、次のようなものを使用して、各スプライトのサイズを設定しようとしています。
.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;
}
}
}
}
ただし、生成された CSS は次のようになります。
...
.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);
}
...
魔法の機能は Compass によって作成されたものではないようです。何か不足していますか?