自定义CSS添加到罗盘

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）添加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拷贝，修改为使用自定义模板，并减少到只有必要组成部分。它也被修改不会引发关于重复常量的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;仅当添加必要的。