Sass / 指南针精灵

Question

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

SAS

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

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