指南針雪碧圖像和規模

Question

我花了過去4個小時試圖找到一種方法來創建一個精靈圖像與指南針和sass，也可以自動縮放每個單獨的圖像與background-size屬性一起使用。

沒有我找到的作品，不能相信這是困難的。

有沒有人有一個工作的例子？

編輯：這是我迄今爲止

@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); 
     } 
    } 
    } 
} 

的混入回報沒有錯誤。

$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" 
} 

當我嘗試編譯時，我從上面的實現中收到以下錯誤消息。通過Prepros App。

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

更新：

的解決方案取決於三個關鍵部分：

1. 規模寬度
2. 標高
3. 獲取背景位置

抓鬥兩者的尺寸，完成子畫面和單個圖標：

$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 
|------|   | 
+----------------+ 

因此，我們需要擴大我們的背景讓這樣的事情：（股利應具備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%; 

剩下的只是一些基本的數學計算上精靈內部的圖標間距作爲相對值：

以像素爲單位獲取頂部空間（負值）：

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

薩斯需要一個PX-值

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

設置背景位置百分比：

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