jakesgordon / sprite-factory

Automatic CSS Sprite Generator
http://codeincomplete.com/posts/2011/4/29/sprite_factory/
MIT License
621 stars 76 forks source link

Rewrite compass mixin #40

Closed drgullin closed 9 years ago

drgullin commented 9 years ago

How do I rewrite this code to Sprite Factory?

$sprite: sprite-map("sprite/*.png", $spacing: 5px)
$sprite2x: sprite-map("sprite2x/*.png", $spacing: 10px)

=s($map1x: false, $map2x: false, $filename: false, $size: false, $image: true, $position: false, $repeat: false)
  @if $map1x != false
    @if $filename != false and $size == true
      width: image-width(sprite-file($map1x, $filename))
      height: image-height(sprite-file($map1x, $filename))
    @if $filename != false and $image == true and $position == true
      $ending: null
      @if $repeat == 'x'
        $ending: repeat-x
      @else if $repeat == 'y'
        $ending: repeat-y
      @else if $repeat == 'no'
        $ending: no-repeat
      @else if $repeat != false
        $ending: unquote($repeat)
      @if $repeat != false
        background: sprite-url($map1x) sprite-position($map1x, $filename) $ending
      @else
        background-image: sprite-url($map1x)
        background-position: sprite-position($map1x, $filename)
    @else
      @if $image == true
        background-image: sprite-url($map1x)
      @if $position == true
        background-position: sprite-position($map1x, $filename)
      @if $repeat == 'x'
        background-repeat: repeat-x
      @else if $repeat == 'y'
        background-repeat: repeat-y
      @else if $repeat == 'no'
        background-repeat: no-repeat
      @else if $repeat != false
        background-repeat: unquote($repeat)
  @if $map2x != false
    +retina
      @if $image == true
        background-image: sprite-url($map2x)
      @if $position == true
        @if $map1x != false
          $pos: sprite-position($map2x, $filename)
          @if sprite-position($map1x, $filename) != ((nth($pos, 1) / 2) (nth($pos, 2) / 2))
            background-position: (nth($pos, 1) / 2) (nth($pos, 2) / 2)
        @else
          background-position: sprite-position($map2x, $filename)
      @if $image == true
        @if $map1x != false
          background-size: (image-width(sprite-path($map2x)) / 2) (image-height(sprite-path($map2x)) / 2)
jakesgordon commented 9 years ago

Sorry, I'm not familiar with compass