Image function.

[justinskolnick]

The image() function returns a CSS url() function. The function prepends the file specified as $imageName with the default image path/directory or a provided $imagesFolder.

background-image: url('#{$imagesFolder}github-download-sprite.png');

becomes:

background-image: image('github-download-sprite.png');

Likewise, the svg-image mixin can be rewritten from:

#{$property}: url('#{$svgFolder}#{$imageName}.svg');

.no-svg & {
    #{$property}: url('#{$imagesFolder}#{$imageName}.png');
}

to:

#{$property}: url('#{$imageName}.svg', $svgFolder);

.no-svg & {
    #{$property}: url('#{$imageName}.png');
}

or removed altogether, with the rule (and whenever necessary, the fallback) specified inline, minus the @include.

[kamsar]

:thumbsup:

[ajmueller]

This is great, @justinskolnick! I think I only found one bug and it's in the function documentation:

// =image('feed.png', 'img/css/') will return url('../img/css/feed.png') // =image('feed.png', 'img/css') will return url('../img/css/feed.png')

In both cases these shouldn't have the ../ at the beginning of the returned path, correct? Or maybe I'm missing something?

[justinskolnick]

Sorry about that.

[ajmueller]

No worries, thanks for the PR!