Feature Request: SASS Mixins

[chapati23]

What I really loved about merbjedi's sprite gem was that it could output sass mixins (https://github.com/merbjedi/sprite/) which enabled you to add images via :before or :after pseudo-elements. you could just add your mixin to it with +sprite('icons', 'arrow'), no need for extra-markup.

would that be hard to do with sprite-factory?

[levraipixel]

I agree it could be helpful to be able to do it directly. In the meantime, you can customize the code given at section "Customizing the entire CSS output" of the README:

SpriteFactory.run!('images/timer') do |images|
  rules = []
  rules << "div.running img.button { cursor: pointer; #{images[:running][:style]} }"
  rules << "div.stopped img.button { cursor: pointer; #{images[:stopped][:style]} }"
  rules.join("\n")
end

into something (untested) like:

SpriteFactory.run!('images/timer') do |images|
  images.map do |image_name, image_data|
    "@mixin sprite-image-#{image_name} { ... }"
  end.join("\n")
end

[chapati23]

thanks man, just FYI if anyone wants to use it: this is the code i came up with (could certainly be more DRY, pls help if you know how):

SpriteFactory.run!('app/assets/images/icons',     output_style: 'app/assets/stylesheets/sprite-icons-mixins.sass', style: 'sass') do |images|
  images.map do |name, data|
<<EOF
=sprite-icon-#{name}($position: 'before', $x-offset: 0, $y-offset: 0)
  overflow: visible
  position: relative

  @if $position == 'before'
    &:before
      background: url(icons.png) -#{data[:x]}px -#{data[:y]}px no-repeat
      content: ''
      display: block
      height: #{data[:height]}px
      left: -(#{data[:width]}+10)+px
      margin: (#{-(data[:height]/2)}+$y-offset)+px 0 0 $x-offset+px
      position: absolute
      top: 50%
      width:  #{data[:width]}px

  @else if $position == 'after'
    &:after
      background: url(icons.png) -#{data[:x]}px -#{data[:y]}px no-repeat
      content: ''
      display: block
      height: #{data[:height]}px
      margin: (#{-(data[:height]/2)}+$y-offset)+px 0 0 $x-offset+px
      position: absolute
      right: -(#{data[:width]}+10)+px
      top: 50%
      width:  #{data[:width]}px

EOF
  end.join("\n")
end

[levraipixel]

great, I'm not used to SaSS but ScSS equivalent code shouldn't be that different. Thanks for posting :)

[renancouto]

I was able to format the css output with mixin this way:

SpriteFactory.run!(
    ref,
    :style => 'scss',
    :library => 'chunkypng',
    :nocomments => true) do |images|
    items = []

    images.map do |name, data|
        items << "@include type(#{name}, #{data[:width]}, #{data[:height]}, #{data[:x]}, #{data[:y]});"
    end

    rules = []
    rules << "@mixin type($type, $w, $h, $x, $y) {
    &.\#{$type} {
        background-position: -\#{$x}px -\#{$y}px;
        width: \#{$w}px;
        height: \#{$h}px;
    }
}\n"

    rules << items
end

Which gave me this:

@mixin type($type, $w, $h, $x, $y) {
    &.#{$type} {
        background-position: -#{$x}px -#{$y}px;
        width: #{$w}px;
        height: #{$h}px;
    }
}

@include type(item-1, 10, 20, 0, 0);
@include type(item-2, 10, 20, 0, 20);
...

[ldexterldesign]

@pshizzle hey, was there a reason you switched from https://github.com/merbjedi/sprite/ ? Are you still using https://github.com/jakesgordon/sprite-factory/ for your image spriting?

Yours hopefully,

[ldexterldesign]

+1 for this feature request too! ~ https://twitter.com/ldexterldesign/status/352080562871209986

Regards,

[famousketchup]

+1 from me. Would really like to use this instead of Compass (as using it only for sprites seems to be an overkill), but having control over my sprites mostly from sass is still much more desirable

[ldexterldesign]

Hey @dmitriy-korotayev,

I've recently settled on the following for all my icon/spriting needs:

• https://github.com/filamentgroup/grunticon
• https://github.com/fontello/fontello

Regards,

[famousketchup]

Interesting approach to the old concept. From what I've found out, it's not supported in some minor browsers and old phones, that is 'whatever'. But what about traffic issues, especially on smartphones? I guess, it'll be not so good to have all the images in one file, as they'll be all downloaded together instead of dynamically, depending, whether the element they are assigned to, is present, am I right?

[Fedcomp]

I would like to see that feature as well. Rake task is producing garbage, imo the work with sprites should be transparent and the same transparently as regular asset, including deploying project.