sass - Add custom CSS to sprites generated with Compass -

i have code in my_images.scss file:

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

the output this:

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

how can change code include custom css in output. want generate this:

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

important

i have not solution this: since these built using @extend need add selector named .icon-sprite , include custom styles. so:

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

compiles like:

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

but redundant duplicate css code. i'd generate:

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

is possible using compass? in advance.

your solution enough, same way. css gzipped, difference in size 10 bytes.

it's readability of sass matters, not size of css.

but if want css compact out of perfectionism, possible compass! you'll require monkey-patching.

1) inside project folder, create lib/ subfolder (if haven't got already).

2) download erb template file folder: https://github.com/chriseppstein/compass/blob/stable/lib/compass/sprite_importer/content.erb#l45

3) add display: inline-block; line after line 45 of file (it's highlighted if follow link).

4) have make compass make use of template. create sprite_importer.rb next , add following code:

require 'erb' require 'compass/sprite_importer/binding' module compass   class spriteimporter < sass::importers::base      # generates sass 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 

this copy of sprite_importer.rb, modified use custom template , reduced necessary part. modified not raise ruby warnings duplicate constants.

5) import file config.rb:

require './lib/sprite_importer' 

6) run compass clean , recompile project.

you'll have display: inline: block; added sprites wanted:

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

you may add logic erb template inline-block; added when necessary.