Easy relative path scss function for wordpress themes

url-function.scss

//-FUNCTIONS

//adapted from here: https://css-tricks.com/snippets/sass/simple-asset-helper-functions/
// Base path for assets (fonts, images...),
// should not include trailing slash
$asset-base-path: 'wp-content/themes/{{name of your theme}}/assets' !default;

// Asset URL builder
@function asset($type, $file) {
  @return url($asset-base-path + '/' + $type + '/' + $file);
}

// Image asset helper
@function image($file) {
  @return asset('images', $file);
}

// Font asset helper
@function font($file) {
  @return asset('fonts', $file);
}

//Usage Example

//- FONTS
@font-face {
  font-family: 'AllerBold';
  src: font('/Aller/AllerBold.woff2') format('woff2'),
    font('/Aller/AllerBold.woff') format('woff');
}

.foo {
  background-image: image('kittens.png');
}