Sass/Compass sprites

Question

Привет всем, у меня есть проблема с генерацией спрайт-файла, я хочу добавить новые файлы в конец файла, но компас добавляет новые файлы в алфавитном порядке, а затем все позиции меняются, как заставить компас добавлять файлы в конце файла спрайтов

SASS

$sprite-spacing: 20px; 
$sprite-layout: horizontal; 
@import "sprite/*.png"; 
@include all-sprite-sprites; 

CONFIG

on_sprite_saved do |filename| 
    if File.exists?(filename) 
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png') 
    end 
end 

on_stylesheet_saved do |filename| 
    if File.exists?(filename) 
    css = File.read filename 
    File.open(filename, 'w+') do |f| 
     f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png') 
    end 
    end 
end 

Answer 1

не устанавливать фоновые позиции вручную. Вы можете сделать это автоматически, не создавая классы Compass.

Скажем, у вас есть следующие спрайтов:

• изображения/
  • социальные/
    • facebook.png
    • twitter.png

SASS обновляется в соответствии с @ piouPiouM-й suggestoin:

$social-sprite-dimensions: true 
@import "social/*.png"; 

#my-semantic-selector { 
    @include social-sprite(facebook); 
} 

#another .semantic > selector { 
    @include social-sprite(twitter); 
} 

Это приводит к следующей чистой CSS:

.social-sprite, #my-semantic-selector, #another .semantic > selector { 
    background: url('/images/social-sa75ff48010.png') no-repeat; 
} 

#my-semantic-selector { 
    background-position: 0 -50px; 
    width: 27px; 
    height: 25px; 
} 

#another .semantic > selector { 
    background-position: 0 -25px; 
    width: 27px; 
    height: 25px; 
} 

можно написать более универсальную подмешать, которая позволяет несколько коллекций спрайтов. Он понадобится Compass sprite helpers и sprite base. Если для вас требуется несколько коллекций спрайтов, и вам нужен пример, скажите об этом в комментариях.