Skip to content

Automatic selectors #12

BadMinus opened this Issue Feb 29, 2012 · 3 comments

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?

or even with whitespace 
````body 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
Something went wrong with that request. Please try again.