Compass Sprite Image and Scale

Question

Я провел последние 4 часа, пытаясь найти способ создания спрайта с помощью Compass и sass, который также автоматически масштабирует каждое отдельное изображение для использования с свойством background-size.

Ничего не найдено, не могу поверить, что это так сложно.

Есть ли у кого-нибудь рабочий пример?

Edit: Это то, что я до сих пор

@mixin resize-sprite($map, $sprite, $percent) { 
    $spritePath: sprite-path($map); 
    $spriteWidth: image-width($spritePath); 
    $spriteHeight: image-height($spritePath); 
    $width: image-width(sprite-file($map, $sprite)); 
    $height: image-height(sprite-file($map, $sprite)); 

    @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100))); 
    width: ceil($width*($percent/100)); 
    height: ceil($height*($percent/100)); 
    background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100)); 
} 

@mixin resize-sprite-set($map, $percent, $only...) { 
    $name: sprite_map_name($map); 

    @each $sprite in sprite_names($map) { 
    @if length($only) == 0 or index($only, $sprite) != false { 
     .#{$name}-#{$sprite} { 
     @include resize-sprite($map, $sprite, $percent); 
     } 
    } 
    } 
} 

The подмешать возвращается без ошибок.

$my-icons-spacing: 10px; // give some space to avoid little pixel size issues on resize 

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

$my-icons-sprite-dimensions: true; 

@include all-my-icons-sprites; 

// the fun part 

.small-icons { // overriding all sprites 
    @include resize-sprite-set($my-icons-sprites, 40); // 40% sized 
} 

.some-part-of-my-site { 
    @include resize-sprite-set($my-icons-sprites, 40, logo, ok); // will create overrides only for sprites "logo" and "ok" 
} 

Я получаю следующее сообщение об ошибке из вышеприведенной реализации при попытке скомпилировать. Приложение Via Prepros.

remove ../images/my-icons-s9e77ab1ef1.png 
    create ../images/my-icons-s9e77ab1ef1.png 
    error style.scss (Line 62 of _mixins.scss: Undefined mixin 'resize-sprite-set'.) 
identical ../css/style.css 

Answer 1

Вот Mixin для изменения размера спрайтов, который прекрасно работает

@mixin resize-sprite($map, $sprite, $percent) { 
    $spritePath: sprite-path($map); 
    $spriteWidth: image-width($spritePath); 
    $spriteHeight: image-height($spritePath); 
    $width: image-width(sprite-file($map, $sprite)); 
    $height: image-height(sprite-file($map, $sprite)); 

    @include background-size(ceil($spriteWidth * ($percent/100)) ceil($spriteHeight * ($percent/100))); 
    width: ceil($width*($percent/100)); 
    height: ceil($height*($percent/100)); 
    background-position: 0 floor(nth(sprite-position($map, $sprite), 2) * ($percent/100)); 
} 

и GitHub он пришел из: https://gist.github.com/darren131/3410875

Answer 2

Я также сделал некоторые исследования по этому вопросу. Это суть в том, что я придумал: https://gist.github.com/apauly/7917906

Update:

Решение зависит от трех ключевых частей:

1. ширина шкалы
2. шкала высоты
3. Фоновая положении

0. Grab размеры для обоих, полный спрайт и единственный значок:

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

$sprite-file: sprite-path($map); 
$sprite-width: image-width($sprite-file); 
$sprite-height: image-height($sprite-file); 

1. Рассмотрим DIV отображающее спрайт в качестве фона. Установите background-size: 100%;, чтобы убедиться, что фоновый спрайт покрывает всю ширину div. Если один будет использовать width: 100%;, результат будет что-то вроде этого:

+----------------+ 
|--|    | 
|----------------| 
|--------|  | <--- This is the sprite image we want to display 
|------|   | 
+----------------+ 

Таким образом, мы должны увеличить наш фон, чтобы получить что-то вроде этого: (DIV должен иметь overflow:hidden хотя)

+----------------+ 
|---------|    | 
|-----------------------| 
|----------------|  | <--- 
|-------------|   | 
+----------------+ 

Для достижения этой цели, просто разделить ширину полного спрайта по ширине одного значка:

width:percentage($sprite-width/$icon-width); 

2. Это один в основном вдохновлен блог форма tkenny: http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/

Полученный код дерзости это:

display: block; 
height: 0; 
padding-bottom: percentage($icon-height/$icon-width); 
background-size: 100%; 

3. Остальное просто некоторые основные математики для вычисления вершины расстояние между значком внутри спрайта как относительное значение:

Получите пространство сверху (в отрицательном значении):

$space-top:floor(nth(sprite-position($map, $icon), 2)); 

Sass потребуется рх-значение

@if $space-top == 0 { 
    $space-top: 0px 
} 

Установите положение фона с процентами:

background-position:0 percentage(
    -1 * $space-top/($sprite-height - $icon-height) 
);