你的解决方案足够好,我也会这样做。您的 CSS 将被 gzip 压缩,因此大小差异大约为 10 个字节。
重要的是 SASS 的可读性,而不是 CSS 的大小。
但如果你真的希望你的 CSS 出于完美主义而紧凑,那么使用 Compass 就可以实现!你需要一些猴子补丁。
1)在你的项目文件夹中,创建一个lib/
子文件夹(如果您还没有)。
2) 将 erb 模板文件下载到该文件夹中:https://github.com/chriseppstein/compass/blob/stable/lib/compass/sprite_importer/content.erb#L45 https://github.com/chriseppstein/compass/blob/stable/lib/compass/sprite_importer/content.erb#L45
3)添加display: inline-block;
该文件的第 45 行之后的行(如果您点击链接,它会突出显示)。
4) 现在您必须让 Compass 使用该模板。创建一个sprite_importer.rb
在它旁边并添加以下代码:
require 'erb'
require 'compass/sprite_importer/binding'
module Compass
class SpriteImporter < Sass::Importers::Base
# Generates the Sass for this sprite file
def self.content_for_images(uri, name, skip_overrides = false)
template_folder = File.expand_path('../', __FILE__)
content_template_file = File.join(template_folder, 'content.erb')
content_template = ERB.new(File.read(content_template_file))
binder = Compass::Sprites::Binding.new(:name => name, :uri => uri, :skip_overrides => skip_overrides, :sprite_names => sprite_names(uri), :files => files(uri))
content_template.result(binder.get_binding)
end
end
end
这是一个副本sprite_importer.rb https://github.com/chriseppstein/compass/blob/stable/lib/compass/sprite_importer.rb,修改为使用自定义模板并减少到仅必要的部分。它还经过修改,不会引发有关重复常量的 Ruby 警告。
5)现在导入该文件config.rb
:
require './lib/sprite_importer'
6) Run compass clean
并重新编译您的项目。
你将拥有display: inline: block;
就像你想要的那样添加到你的所有精灵中:
.sexy-sprite, .sexy-accept, .sexy-add, .sexy-anchor, .sexy-application, .sexy-application_add, .sexy-application_cascade, .sexy-application_delete, .sexy-application_double, .sexy-application_edit, .sexy-application_error, .sexy-application_form, .sexy-application_form_add, .sexy-application_form_delete, .sexy-application_form_edit, .sexy-application_form_magnify, .sexy-application_get, .sexy-application_go, .sexy-application_home, .sexy-application_keyasdf, .sexy-application_lightning, .sexy-application_link, .sexy-application_osx, .sexy-application_osx_terminal, .sexy-application_put, .sexy-application_side_boxes, .sexy-application_side_contract, .sexy-application_side_expand, .sexy-application_side_list, .sexy-application_side_tree, .sexy-application_split, .sexy-application_tile_horizontal, .sexy-application_tile_vertical, .sexy-application_view_columns, .sexy-application_view_detail, .sexy-application_view_gallery, .sexy-application_view_icons, .sexy-application_view_list, .sexy-application_view_tile, .sexy-application_xp, .sexy-application_xp_terminal, .sexy-arrow_branch, .sexy-arrow_divide, .sexy-arrow_down, .sexy-arrow_in, .sexy-arrow_inout, .sexy-arrow_join, .sexy-arrow_left, .sexy-arrow_merge, .sexy-arrow_out, .sexy-arrow_redo, .sexy-arrow_refresh, .sexy-arrow_refresh_small, .sexy-arrow_right, .sexy-arrow_rotate_anticlockwise, .sexy-arrow_rotate_clockwise, .sexy-arrow_switch, .sexy-arrow_turn_left, .sexy-arrow_turn_right, .sexy-arrow_undo, .sexy-arrow_up, .sexy-asterisk_orange, .sexy-asterisk_yellow, .sexy-attach {
background: url('/images/sexy-sce786a2ec5.png') no-repeat;
display: inline-block;
}
您还可以向 erb 模板添加一些逻辑,以便inline-block;
仅在必要时添加。