// http://qiita.com/orangemittoo/items/1c9f32296836d3ea125e

$sprites-images-directory: sprites !default
$sprite-map: sprite-map("#{$sprites-images-directory}/*.png", $layout: smart)
$map-img: sprite-url($sprite-map)

=sprite-background($name, $background-size: null, $background-repeat: null)
  // block;
  background-image: $map-img
  $pos: sprite-position($sprite-map, $name)
  background-position: nth($pos, 1) / 2 nth($pos, 2) / 2
  @if $background-size
    +background-size($background-size)
  @else
    +background-size(ceil(image-width(sprite-path($sprite-map)) / 2) auto)
  @if $background-repeat
    background-repeat: $background-repeat
  @else
    background-repeat: no-repeat

=bg-size($value)
  @if list($value)
    @if str-slice(nth($value, 1), 1, 1) == '/'
      $bg-size-value: str-slice(nth($value, 1), 2) nth($value, 2)
      +background-size($bg-size-value)
    @else
      +background-size($value)
  @else
    @if str-slice(nth($value, 1), 1, 1) == '/'
      $bg-size-value: str-slice(nth($value, 1), 2)
      +background-size($bg-size-value)
    @else
      +background-size($value)

// どこでも background-color と background-image と background-position と background-repeat が書ける設定
=background-basics($value)
  @if background_color($value)
    background-color: $value
  @else if background_image($value)
    background-image: image_url("#{$value}")
  @else if background_position($value)
    background-position: $value
  @else if background_repeat($value)
    background-repeat: $value
  @else if background_attachment($value)
    background-attachment: $value
  @else if background_size($value)
    +bg-size($value)

// +bg(black 'image.png' (left center) no-repeat fixed (/ 20px 30px))
=bg($value)
  @for $i from 1 through length($value)
    +background-basics(nth($value, $i))