Automatic selectors #12

BadMinus opened this Issue Feb 29, 2012 · 3 comments


None yet

2 participants


Wouldn't be great if was an option when you can write selectors in filenames. Often I know how I will use image so why don't write selectors in filename?

`````` body__div#main_shit__ul__li__a.class.double-dragon--hover.pngor even with whitespacebody div#main_shit ul li a.class.double-dragon--hover.png````
We can pass an options like repeat-x ````.class(rx).png => .class{background-image:url(sprites.png) repeat-x}````

I don't know how to write this beautifully so it just idea yet. Below just sample code, but it works

   def self.css(selector, name, attributes)
      if selector == 'filename'
        name = name.gsub(/--/,":")
        name = name.gsub(/__/," ")
        "#{name} { #{css_style(attributes)}; }"
        "#{selector}#{name} { #{css_style(attributes)}; }"

Its an interesting idea... but I'm not sure I'd build it into the core gem. I think different people might have different needs on how to do the filename => selector mapping

I'd more likely suggest using the 'customizing the entire css output' (see readme) approach to customizing your output:!('my_image_folder') do |images|
  rules = []
  images.each do |name, image|
    selector = name.gsub(/__/, " ")
    rules << "#{selector} { #{image[:style]}; }"

(or something like that)

You could also extend the library by adding a custom style generator (3 methods) to the SpriteFactory::Style module and then specify that as the :style. E.g. to add a filename_selector style, The 3 methods you would add would be something like:

require `sprite-factory`

module SpriteFactory
  module Style

    def self.filename_selector(selector, name, attributes)
      css("", name.gsub(/__/, " "), attributes)     # same as css but selector based on modified-name instead

    def self.filename_selector_style(attributes)

    def self.filename_selector_comment(comment)

end!('images', :style => 'filename_selector',  ... my other options here ... )
@jakesgordon jakesgordon reopened this May 10, 2012

You know, the minute I clicked OK on that comment I started to think a bit more about this... particularly the support it would allow for 'foo--hover.png' becoming 'foo:hover' selector...

... I might reconsider this, if we stick to a simple sensible convention it might be reasonable to just always support it..

  • -- becomes ':'
  • __ becomes ' '

Covers 80% of what might be needed.

I'm reopening for reconsideration.

@jakesgordon jakesgordon added a commit that referenced this issue May 10, 2012
@jakesgordon Added support for per-image selectors, including :hover psuedo-class …
…selectors (issue #12 and issue #14)

This is included in master branch and new release of the sprite-factory gem (v1.5.0). You can read about it on

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment