Forked from rob-kistner/mixin-asset-helper.scss
Last active
October 23, 2019 19:00
-
-
Save Kcko/37cb67308ae559cae41f227a884de318 to your computer and use it in GitHub Desktop.
sass mixin: Asset Helper Function
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// Base path for assets (fonts, images...), | |
/// should not include trailing slash | |
/// @access public | |
/// @type String | |
$asset-base-path: '../assets' !default; | |
/// Asset URL builder | |
/// @access private | |
/// @param {String} $type - Asset type, matching folder name | |
/// @param {String} $file - Asset file name, including extension | |
/// @return {URL} - A `url()` function leading to the asset | |
@function asset($type, $file) { | |
@return url($asset-base-path + '/' + $type + '/' + $file); | |
} | |
/// Image asset helper | |
/// @access public | |
/// @param {String} $file - Asset file name, including extension | |
/// @return {URL} - A `url()` function leading to the image | |
/// @require {function} asset | |
@function image($file) { | |
@return asset('images', $file); | |
} | |
/// Font asset helper | |
/// @access public | |
/// @param {String} $file - Asset file name, including extension | |
/// @return {URL} - A `url()` function leading to the font | |
/// @require {function} asset | |
@function font($file) { | |
@return asset('fonts', $file); | |
} | |
/// USAGE | |
/* | |
@font-face { | |
font-family: 'Unicorn Font'; | |
src: font('unicorn.eot?') format('eot'), | |
font('unicorn.otf') format('truetype'), | |
font('unicorn.woff') format('woff'), | |
font('unicorn.svg#unicorn') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
.foo { | |
background-image: image('kittens.png'); | |
} | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment