1

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

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
4

1 回答 1

1

不要手动设置背景位置。您可以自动执行此操作，而无需 Compass 生成类。

说，你有以下精灵：

  • 图片/
    • 社会的/
      • 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。如果您需要多个精灵集合并且您需要一个示例，请在评论中说明。

于 2013-08-13T12:15:22.353 回答