Sass / Compass精灵

Question

嗨，我对生成sprite文件有一些问题，我想在文件末尾添加新文件，但是罗盘按字母顺序添加新文件，然后所有位置都在改变，如何强迫罗盘在sprite文件的末尾添加文件。

沙斯

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

配置

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的建议更新：

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

可以编写一个更通用的混合器，允许多个sprite集合。它需要罗盘、雪碧助手和雪碧基。如果需要多个sprite集合，并且需要一个示例，请在注释中说明这一点。