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

根据@ piouPiouM的建议更新了SASS：

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

可以编写一个更通用的mixin，允许多个精灵集合。它需要Compass sprite helpers和sprite base。如果您需要多个精灵集合，并且需要一个示例，请在评论中说明。