css - Sass/compass Sprite

Question

大家好，我在生成 sprite 文件时遇到了一些问题，我想在文件末尾添加新文件，但 compass 按字母顺序添加新文件，然后所有位置都在变化，如何强制 compass 在文件末尾添加文件 Sprite 文件

SASS

$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 生成类。

比如说，你有以下 Sprite :

• 图片/
  • 社交/
    • Facebook .png
    • 推特.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;
}

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