将自定义 CSS 添加到使用 Compass 生成的精灵中

Question

我在my_images.scss 文件中有这段代码：

$icon-layout:smart;
$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

输出是这样的：

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... {
  background: url('/../../media/img/icon-s00227a988a.png') no-repeat;
}

.icon-asterisk {
  background-position: -108px -18px;
  height: 18px;
  width: 18px;
}

.icon-camera {
  background-position: -54px -18px;
  height: 18px;
  width: 18px;
}

如何更改代码以在输出中包含自定义 CSS。我想生成这个：

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... 
{
    background: url('/../../media/img/icon-s00227a988a.png') no-repeat;

    /* My custom CSS here */
    display: inline-block;
}

重要

对此我有一个不太好的解决方案：由于这些是使用@extend 构建的，因此您只需添加一个名为.icon-sprite 的选择器并包含自定义样式。像这样：

.icon-sprite {
  display: inline-block;
}

$icon-layout:smart;
$icon-sprite-dimensions: true;
@import "icon/*.png";
@include all-icon-sprites;

编译成类似的东西：

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... {
  display: inline-block;
}

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... {
  background: url('/../../media/img/icon-s00227a988a.png') no-repeat;
}
...

但是复制 CSS 代码是完全多余的。我想生成：

.icon-sprite, .icon-asterisk, .icon-camera, .icon-clock, ... {
  background: url('/../../media/img/icon-s00227a988a.png') no-repeat;
  display: inline-block;
}

可以使用 Compass 吗？ 提前致谢。

Answer 1

您的解决方案已经足够好了，我也会这样做。您的 CSS 将被压缩，因此大小上的差异将是 10 个字节。

重要的是 SASS 的可读性，而不是 CSS 的大小。

但是，如果您真的希望您的 CSS 因完美主义而变得紧凑，那么 Compass 就可以了！你需要一些猴子补丁。

1) 在您的项目文件夹中，创建一个lib/ 子文件夹（如果您还没有的话）。

2) 将 erb 模板文件下载到该文件夹​​：https://github.com/chriseppstein/compass/blob/stable/lib/compass/sprite_importer/content.erb#L45

3) 在该文件的第 45 行之后添加 display: inline-block; 行（如果您点击链接，则会突出显示）。

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 的副本，已修改为使用自定义模板并减少到只有必要的部分。它也被修改为不引发关于重复常量的 Ruby 警告。

5) 现在从config.rb 导入该文件：

require './lib/sprite_importer'

6) 运行 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;。