Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Looking for existing sprite method #1093

Closed
lifeiscontent opened this Issue Nov 13, 2012 · 23 comments

Comments

Projects
None yet
4 participants

any plans to make a sprite method to check wether a sprite exists?

this would be nice for ignorant each loops.

@each $item in $items {
   @if sprite-exists($sprite, sprite-name) {
     // create sprite
   }
   // fail silently
}
Owner

scottdavis commented Nov 13, 2012

Sprites arnt regenerated unless they change. I'm not 100% sure what you are trying to accomplish since the generation is a no-op if it exists

Sent from my iPhone

On Nov 13, 2012, at 1:29 PM, Aaron Reisman notifications@github.com wrote:

any plans to make a sprite method to check wether a sprite exists?

this would be nice for ignorant each loops.

@each $item in $items {
@if sprite-exists($sprite, sprite-name) {
// create sprite
}
// fail silently
}

Reply to this email directly or view it on GitHub.

I get a compilation error if the sprite doesn't exist.

I want a method that I can call to do a lookup on the file before it compiles, so then I can silently fail over and continue compilation.

Owner

scottdavis commented Nov 27, 2012

Can you give a better example of the use case? when you call a sprite function it should be generating the sprite on demand. You should not be getting a compilation error.

sure,

rather than doing this

.icon {
  $sprite: sprite-map('phoenix/default/sprites/*.png');
  background: transparent $sprite no-repeat 0 0;
  @include inline-block;
//(baseline);
$icons:
  ('small' 'black' 'down-arrow')
  ('small' 'black' 'right-arrow')
  ('small' 'blue' 'down-arrow')
  ('small' 'blue' 'edit')
  ('small' 'blue' 'right-arrow')
  ('small' 'dark-gray' 'report')
  ('small' 'dark-gray' 'reply')
  ('small' 'dark-green' 'down-arrow')
  ('small' 'dark-green' 'right-arrow')
  ('small' 'gray' 'close')
  ('small' 'gray' 'help')
  ('small' 'gray' 'right-arrow')
  ('small' 'gray' 'plus')
  ('small' 'green' 'checkmark')
  ('small' 'green' 'message')
  ('medium' 'blue' 'delete')
  ('medium' 'blue' 'edit')
  ('medium' 'dark-gray' 'credit-card')
  ('medium' 'dark-gray' 'paypal')
  ('medium' 'dark-gray' 'electronic-check')
  ('medium' 'gray' 'age')
  ('medium' 'gray' 'bi-female')
  ('medium' 'gray' 'bi-male')
  ('medium' 'gray' 'credit-card')
  ('medium' 'gray' 'delete')
  ('medium' 'gray' 'edit')
  ('medium' 'gray' 'electronic-check')
  ('medium' 'gray' 'gay-female')
  ('medium' 'gray' 'gay-male')
  ('medium' 'gray' 'location')
  ('medium' 'gray' 'paypal')
  ('medium' 'gray' 'straight')
  ('large' 'dark-gray' 'flirt')
  ('large' 'dark-gray' 'message')
  ('large' 'dark-gray' 'people')
  ('large' 'dark-gray' 'save')
  ('large' 'gray' 'flirt')
  ('large' 'gray' 'message')
  ('large' 'gray' 'people')
  ('large' 'gray' 'plus')
  ('large' 'gray' 'save')
  ('large' 'red' 'flirt')
  ('large' 'yellow' 'save');

@each $icon in $icons {
  $size: nth($icon, 1);
  $color: nth($icon, 2);
  $name: nth($icon, 3);
  &.#{$size} {
    &.#{$color} {
      &.#{$name} {
        background-position: sprite-position($sprite, "#{$size}_#{$color}_#{$name}_icon");
        width: image-width(sprite-file($sprite, "#{$size}_#{$color}_#{$name}_icon"));
        height: image-height(sprite-file($sprite, "#{$size}_#{$color}_#{$name}_icon"));
      }
    }
  }
}
}

I'd like to just be able to say go through all sizes, all colors, all names and compile the ones that are there rather than explicitly having to set each name, color and size.

Owner

scottdavis commented Nov 27, 2012

Calling sprite-map is a no-op if the sprite doesn't need to be regenerated. I feel that the conditional check you are proposing would be redundant since the sprite processor does this check for you automatically. I am more concerned as to why you are getting a compilation error. Can you shed some more light on the error you are getting?

so for example... maybe I add a sprite name to the list of sprite names to my previous example.

$icons:
 ...
  ('large' 'gray' 'default-male')
  ('large' 'gray' 'default-female');

and if I didn't add the images to this list I would get an error like this:

No sprite called "large_gray_default-male_icon" found in sprite map phoenix/default/sprites/sprites. Did you mean one of: large_dark-gray_flirt_icon, large_dark-gray_message_icon, large_dark-gray_people_icon, large_dark-gray_save_icon, large_gray_flirt_icon, large_gray_message_icon, large_gray_people_icon, large_gray_plus_icon, large_gray_save_icon, large_red_flirt_icon, large_yellow_save_icon, medium_blue_delete_icon, medium_blue_edit_icon, medium_dark-gray_credit-card_icon, medium_dark-gray_electronic-check_icon, medium_dark-gray_paypal_icon, medium_gray_age_icon, medium_gray_bi-female_icon, medium_gray_bi-male_icon, medium_gray_credit-card_icon, medium_gray_delete_icon, medium_gray_edit_icon, medium_gray_electronic-check_icon, medium_gray_gay-female_icon, medium_gray_gay-male_icon, medium_gray_location_icon, medium_gray_paypal_icon, medium_gray_straight_icon, small_black_down-arrow_icon, small_black_right-arrow_icon, small_blue_down-arrow_icon, small_blue_edit_icon, small_blue_right-arrow_icon, small_dark-gray_reply_icon, small_dark-gray_report_icon, small_dark-green_down-arrow_icon, small_dark-green_right-arrow_icon, small_gray_close_icon, small_gray_edit_icon, small_gray_help_icon, small_gray_plus_icon, small_gray_right-arrow_icon, small_green_checkmark_icon, small_green_message_icon
  (in /Users/lifeiscontent/Workspace/phoenix/app/assets/stylesheets/phoenix_ie.scss)

because the file doesn't exist.

and again, if this method existed, I could just put a simple if check to see if the file existed in the sprite.

i would be interested in this as well. some psuedo code to explain what i would like to do....

  @import "global/**/*.png"
  +all-global-sprites

  $sprite-names: sprite-names($global-sprites)
  @each $sprite in $sprite-names
    @if sprite-exists($sprite)
      .selected
        +global-sprite(#{$sprite}_selected)

@brewster1134 that's exactly what I had in mind, except it might be better to pass the sprite reference into the method as well for people that don't want to use the "import" style of spriting... or both

Owner

scottdavis commented Feb 13, 2013

@brewster1134 I'm still having issues understanding this use case. Why would you need to ask if a sprite exists if it is in the list returned by the sprite-names function it has already been generated and therefore does exist.

Owner

scottdavis commented Feb 13, 2013

@lifeiscontent This

and if I didn't add the images to this list I would get an error like this:

No sprite called "large_gray_default-male_icon" found in sprite map phoenix/default/sprites/sprites. Did you mean one of: large_dark-gray_flirt_icon, large_dark-gray_message_icon, large_dark-gray_people_icon, large_dark-gray_save_icon, large_gray_flirt_icon, large_gray_message_icon, large_gray_people_icon, large_gray_plus_icon, large_gray_save_icon, large_red_flirt_icon, large_yellow_save_icon, medium_blue_delete_icon, medium_blue_edit_icon, medium_dark-gray_credit-card_icon, medium_dark-gray_electronic-check_icon, medium_dark-gray_paypal_icon, medium_gray_age_icon, medium_gray_bi-female_icon, medium_gray_bi-male_icon, medium_gray_credit-card_icon, medium_gray_delete_icon, medium_gray_edit_icon, medium_gray_electronic-check_icon, medium_gray_gay-female_icon, medium_gray_gay-male_icon, medium_gray_location_icon, medium_gray_paypal_icon, medium_gray_straight_icon, small_black_down-arrow_icon, small_black_right-arrow_icon, small_blue_down-arrow_icon, small_blue_edit_icon, small_blue_right-arrow_icon, small_dark-gray_reply_icon, small_dark-gray_report_icon, small_dark-green_down-arrow_icon, small_dark-green_right-arrow_icon, small_gray_close_icon, small_gray_edit_icon, small_gray_help_icon, small_gray_plus_icon, small_gray_right-arrow_icon, small_green_checkmark_icon, small_green_message_icon
  (in /Users/lifeiscontent/Workspace/phoenix/app/assets/stylesheets/phoenix_ie.scss)

because the file doesn't exist.

from you post above isn't making much sense to me. Why would you add something to that list that isn't in the sprite map? whats the purpose? do you fall back to loading it from an image?

It's used as a exception handler

Sent from my iPhone

On Feb 12, 2013, at 7:30 PM, Scott Davis notifications@github.com wrote:

@brewster1134 I'm still having issues understanding this use case. Why would you need to ask if a sprite exists if it is in the list returned by the sprite-names function it has already been generated and therefore does exist.


Reply to this email directly or view it on GitHub.

For a simple use case you could do something like have a list of colors, and that would then generate the sprite map for images named of those colors,

Something like blue_button.png

Or blue_panel.png

And call it like .blue.button without needing to worry if the image is in the file path.

Now, this is really nice because you can specify the list of names to loop through and only use the images for those names that you care about, while still being able to progressively add images in the future and not change a single line of code.

Hope this helps, I may or may not have clear thoughts on the bus home though.

I'll check back when I'm home

Sent from my iPhone

On Feb 12, 2013, at 7:36 PM, Scott Davis notifications@github.com wrote:

@lifeiscontent This

and if I didn't add the images to this list I would get an error like this:

No sprite called "large_gray_default-male_icon" found in sprite map phoenix/default/sprites/sprites. Did you mean one of: large_dark-gray_flirt_icon, large_dark-gray_message_icon, large_dark-gray_people_icon, large_dark-gray_save_icon, large_gray_flirt_icon, large_gray_message_icon, large_gray_people_icon, large_gray_plus_icon, large_gray_save_icon, large_red_flirt_icon, large_yellow_save_icon, medium_blue_delete_icon, medium_blue_edit_icon, medium_dark-gray_credit-card_icon, medium_dark-gray_electronic-check_icon, medium_dark-gray_paypal_icon, medium_gray_age_icon, medium_gray_bi-female_icon, medium_gray_bi-male_icon, medium_gray_credit-card_icon, medium_gray_delete_icon, medium_gray_edit_icon, medium_gray_electronic-check_icon, medium_gray_gay-female_icon, medium_gray_gay-male_icon, medium_gray_location_icon, medium_gray_paypal_icon, medium_gray_straight_icon, small_black_down-arrow_icon, small_black_right-arrow_icon, small_blue_down-arrow_icon, small_blue_edit_i
con, small_blue_right-arrow_icon, small_dark-gray_reply_icon, small_dark-gray_report_icon, small_dark-green_down-arrow_icon, small_dark-green_right-arrow_icon, small_gray_close_icon, small_gray_edit_icon, small_gray_help_icon, small_gray_plus_icon, small_gray_right-arrow_icon, small_green_checkmark_icon, small_green_message_icon
(in /Users/lifeiscontent/Workspace/phoenix/app/assets/stylesheets/phoenix_ie.scss)
because the file doesn't exist.

from you post above isn't making much sense to me. Why would you add something to that list that isn't in the sprite map? whats the purpose? do you fall back to loading it from an image?


Reply to this email directly or view it on GitHub.

I apologize. My previous example was missing some important details! I also modified it a bit to be more clear. I would like to be able to do...

// includes foo.png, foo_hover.png, bar.png
@import "global/*.png"
+all-global-sprites

$sprite-names: sprite-names($global-sprites)
@each $sprite in $sprite-names
  @if sprite-exists(#{$sprite}_hover)
    a:hover
      .global-sprite-#{$sprite}
        +global-sprite(#{$sprite}_hover)

to generate...

a:hover
  .global-sprite-foo
    // css to show the hover state of foo

Essentially specifying a sprite based on the parents state...

@scottdavis

the code would look something like this:

$sprite: sprite-map('phoenix/default/sprites/*.png');
$sizes: 'small' 'medium' 'large';
$colors: 'green' 'blue' 'yellow';
$names: 'button';

@each $size in $sizes {
  @each $color in $colors {
    @each $name in $names {
      @if sprite-exists($sprite, sprite-name) {
        .icon.#{$size}.#{$color}.#{$name} {
          /* so now, if the file doesn't exist, we continue to compile
          the sprite instead of having an exception that blocks compliation all together. */
          background-position: sprite-position($sprite, "#{$size}_#{$color}_#{$name}_icon");
          width: image-width(sprite-file($sprite, "#{$size}_#{$color}_#{$name}_icon"));
          height: image-height(sprite-file($sprite, "#{$size}_#{$color}_#{$name}_icon"));
        }
      }
    }
  }
}
Owner

scottdavis commented Feb 14, 2013

Out of morbid curiosity why would you define something that doesn't exist? Is this for building a library?

Currently i am doing this for every sprite with a _selected image

.global-hotspot.selected
  +global-sprite(hotspot_selected)

.global-carousel-dots.selected
  +global-sprite(carousel-dot_selected)

// etc...

Which works fine... just looking for a programmatic way of doing it :)

@scottdavis its for ease of use, I may or may not have assets from a designer yet for each color, but I might know that it will have 4 different colors for the sprite.

Owner

scottdavis commented Feb 16, 2013

I'm going to add a sass function that can detect if a file exists to make this more generic and not bound to just sprites. This should satisfy everyone's needs.

Stafie commented Mar 14, 2013

@scottdavis any progress on the sprite-exists function?
Would love to be able to auto-detect if there is a sprite for the hover/active state of an element.

Thanks!

Stafie commented Mar 14, 2013

Eventually found a solution on how to do that. Here's the code if somebody trying to accomplish this:
The hover state of the sprite is also shown when hovering an anchor or .active parent.

@import "glyphs/*.png";
$glyphs: sprite-map('glyphs/*.png');


[class*="glyph-"] {
  background: $glyphs no-repeat;
  display: inline-block;
}

$sprite-selectors: hover, target, active !default;

@each $i in sprite-names($glyphs) {
  .glyph-#{$i} {
    @include sprite-dimensions($glyphs, $i);
    @include glyphs-sprite($i);

    @each $selector in $sprite-selectors {
      @if sprite_has_selector($glyphs, $i, $selector) {
        a[href]:hover &, .active & {
          @include sprite-background-position($glyphs, "#{$i}_#{$selector}", 0, 0);
        }
      }
    }
  }
}

@Stafie Excellent! That works great!... however only for the supported compass sprite pseudo classes.
@scottdavis Looking forward to the generic function for checking if a file exists!

Owner

scottdavis commented May 22, 2013

reverted by: b236adc

@scottdavis scottdavis closed this Jul 23, 2013

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