-
Notifications
You must be signed in to change notification settings - Fork 6
/
compass-imagehelper.mustache
98 lines (87 loc) · 3.31 KB
/
compass-imagehelper.mustache
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
// ============================================================================
// DO NOT EDIT!
//
// This file is dynamically generated by gulp-compass-imagehelper and
// polyfills the compass imagehelper functions to node-sass enviroments.
// https://www.npmjs.com/package/gulp-compass-imagehelper
// ============================================================================
@function compassImagehelper_getList($image) {
@if map-has-key($compass-imagehelper-imagesmap, $image) {
$list: map-get($compass-imagehelper-imagesmap, $image);
@if type-of($list) == 'list' {
@return $list;
}
}
@warn 'Image `#{$image}` not found.';
@return false;
}
// 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) {
$list: compassImagehelper_getList($image);
@return unquote(nth($list, 3));
}
// Returns the width of the image found at the path supplied by $image relative to your project's images directory.
@function image-width($image) {
$list: compassImagehelper_getList($image);
$width: nth($list, 1);
@return $width * 1px;
}
// Returns the height of the image found at the path supplied by $image relative to your project's images directory.
@function image-height($image) {
$list: compassImagehelper_getList($image);
$height: nth($list, 2);
@return $height * 1px;
}
// 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: '{{{path_prefix}}}' + $image;
@if ($cache-buster == true) {
@if not (image-exists($image)) {
@warn 'Image `#{$image}` not found. Cache-busting failed';
} @else if (map-has-key($compass-imagehelper-imagesmap, $image)) {
$list: map-get($compass-imagehelper-imagesmap, $image);
$hash: nth($list, 4);
$result: $result + '?' + $hash;
}
} @else if ($cache-buster == false) {
} @else {
// probably a string
$result: $result + '?' + $cache-buster;
}
$result: quote($result);
@if ($only-path == false) {
$result: url($result);
}
@return $result;
}
// 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);
}
$compass-imagehelper-imagesmap:(
{{#items}}
'{{{path}}}': {{width}} {{height}} {{{data}}} {{{hash}}},
{{/items}}
);
{{#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 }}};
background-image: inline-image('{{{ path }}}');
}
{{/items}}