sass-image-template.mustache

// =================================================================
// This file is dynamically generated by gulp-compass-imagehelper
// Do NOT edit!
// =================================================================

// Returns if the image is accessible for these image-helpers
// Note: Not part of the official compass functions, but still useful
@function image-exists($image) {
  @return map-has-key($compass-imagehelper-imagesmap, $image);
}

{{#includeData}}
// Embeds the contents of an image directly inside your stylesheet, eliminating the need for another HTTP request. For small images, this can be a performance
// benefit at the cost of a larger generated CSS file.
@function inline-image($image) {
  @if image-exists($image) {
    $list: map-get($compass-imagehelper-imagesmap, $image);
    @return unquote(map-get($list, 'data'));
  }
  @warn "Image '#{$image}' not found.";
  @return null;
}

{{/includeData}}
// Returns the width of the image found at the path supplied by $image relative to your project's images directory.
@function image-width($image) {
  @if image-exists($image) {
    $list: map-get($compass-imagehelper-imagesmap, $image);
    $width: unquote(map-get($list, 'width'));
    @if ($width and str-length($width) > 0) {
      @return number($width) * 1px;
    }
  }
  @warn "Image '#{$image}' not found.";
  @return null;
}

// Returns the height of the image found at the path supplied by $image relative to your project's images directory.
@function image-height($image) {
  @if image-exists($image) {
    $list: map-get($compass-imagehelper-imagesmap, $image);
    $height: unquote(map-get($list, 'height'));
    @if ($height and str-length($height) > 0) {
      @return number($height) * 1px;
    }
  }
  @warn "Image '#{$image}' not found.";
  @return null;
}

// Generates a path to an asset found relative to the project's images directory.
// Passing a true value as the second argument will cause only the path to be returned instead of a url() function
// The third argument is used to control the cache buster on a per-use basis. When set to false no cache buster will be used.
// When true a md5-hash of the file is appended to the url. When a string, that value will be used as the cache buster.
@function image-url($image, $only-path: false, $cache-buster: false) {
  $result: $compass-imagehelper-path-prefix + $image;

  @if not(image-exists($image)) {
    @warn "Image '#{$image}' not found.";
  } @else {
    @if (type-of($cache-buster) == string) {
      $result: $result + '?' + $cache-buster;
    }

    @if ($cache-buster == true) {
      $list: map-get($compass-imagehelper-imagesmap, $image);
      $hash: map-get($list, 'hash');
      $result: $result + '?' + $hash;
    }
  }

  $result: quote($result);

  @if ($only-path == false) {
    $result: url($result);
  }

  @return $result;
}

// Two helper functions for casting string to number by Hugo Giraudel
// http://hugogiraudel.com/2014/01/15/sass-string-to-number/
// http://sassmeister.com/gist/9647408
@function _length($number, $unit) {
  $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax';
  $units: 1px 1cm 1mm 1% 1ch 1 pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax;
  $index: index($strings, $unit);

  @if not ($index) {
    @warn "Unknown unit `#{$unit}`.";
    @return false;
  }

  @return $number * nth($units, $index);
}

@function number($string) {
  // Matrices
  $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
  $numbers: 0 1 2 3 4 5 6 7 8 9;

  // Result
  $result: 0;
  $divider: 0;
  $minus: false;

  // Looping through all characters
  @for $i from 1 through str-length($string) {
    $character: str-slice($string, $i, $i);
    $index: index($strings, $character);

    @if $character == '-' {
      $minus: true;
    } @else if $character == '.' {
      $divider: 1;
    } @else {
      @if not ($index) {
        $result: if($minus, $result * -1, $result);
        @return _length($result, str-slice($string, $i));
      }

      $number: nth($numbers, $index);

      @if $divider == 0 {
        $result: $result * 10;
      } @else {
        // Move the decimal dot to the left
        $divider: $divider * 10;
        $number: $number / $divider;
      }

      $result: $result + $number;
    }
  }

  @return if($minus, $result * -1, $result);
}

$compass-imagehelper-path-prefix: '{{{path_prefix}}}';

$compass-imagehelper-imagesmap: (
{{#items}}
  '{{{path}}}': (
    width: '{{width}}',
    height: '{{height}}',
    {{#includeData}}
    data: '{{{data}}}',
    {{/includeData}}
    hash: '{{{hash}}}'
  ),
{{/items}}
);
{{#createPlaceholder}}

{{#items}}
%{{prefix}}{{fullname}} {
  // Available properties:
  // prefix: {{prefix}};
  // width: {{{width}}};
  // height: {{height}};
  // filename: {{filename}};
  // basename: {{basename}};
  // dirname: {{dirname}};
  // ext: {{ext}};
  // path: {{{path}}};
  // fullname: {{{fullname}}};
  // mime: {{{mime}}};
  // hash: {{{ hash }}};
  {{#includeData}}
  background-image: inline-image('{{{ path }}}');
  {{/includeData}}
  {{^includeData}}
  background-image: image-url('{{{ path }}}');
  {{/includeData}}
}

{{/items}}
{{/createPlaceholder}}