Hình ảnh và quy mô hình chữ nhật Compass

Question

Tôi đã dành 4 giờ qua để tìm cách tạo hình ảnh sprite bằng Compass và sass cũng tự động chia tỷ lệ từng hình ảnh riêng lẻ để sử dụng với thuộc tính kích thước nền.

Không có gì tôi tìm thấy công trình, không thể tin rằng điều đó thật khó.

Có ai có ví dụ làm việc không?

Chỉnh sửa: Đây là những gì tôi có cho đến nay

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

Lợi nhuận mixin không có lỗi.

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

Tôi nhận được thông báo lỗi sau từ việc triển khai ở trên khi tôi cố gắng biên dịch. Qua ứng dụng 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

Dưới đây là một mixin cho thay đổi kích thước sprites rằng tác phẩm đẹp mắt

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

và github nó đến từ: https://gist.github.com/darren131/3410875

Answer 2

tôi cũng đã thực hiện một số nghiên cứu về vấn đề này. ý chính này là những gì tôi đã đưa ra: https://gist.github.com/apauly/7917906

Cập nhật:

Các giải pháp phụ thuộc vào ba chìa khóa-phần:

1. rộng quy mô
2. chiều cao quy mô
3. get background-position

0. Grab kích thước cho cả hai, ma đầy đủ và biểu tượng duy nhất:

$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. Xem xét một div hiển thị một sprite như nền tảng của nó. Đặt background-size: 100%; để đảm bảo rằng phông nền bao phủ toàn bộ chiều rộng của div. Nếu người ta sẽ sử dụng width: 100%;, kết quả sẽ là một cái gì đó như thế này:

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

Vì vậy, chúng ta cần phải mở rộng nền của chúng tôi để có được một cái gì đó như thế này: (div nên có overflow:hidden dù)

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

Để đạt được điều đó, chỉ cần chia chiều rộng của toàn bộ sprite theo chiều rộng của biểu tượng đơn lẻ:

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

2. Cái này về cơ bản là lấy cảm hứng từ một hình thức bài viết trên blog tkenny: http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/

dẫn Mã sass là thế này:

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

3. Phần còn lại chỉ là một số thuật toán cơ bản để tính toán đầu khoảng cách của biểu tượng bên trong của sprite dưới dạng giá trị tương đối:

Lấy khoảng trống từ đầu pixel (giá trị âm):

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

Sass sẽ cần một px giá trị

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

Đặt vị trí nền với tỷ lệ phần trăm:

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