Simple Asset Helper Functions

Dealing with paths is always a bit annoying, you will concede. Fortunately, it is extremely easy with Sass to have a beautiful API to manage assets and to keep the code simple to maintain. The only thing we need is to store the base asset path in a variable, and a couple of functions to build our API.

/// 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');
}
@font-face {
  font-family: 'Unicorn Font';
  src: url("../assets/fonts/unicorn.eot?") format("eot"), url("../assets/fonts/unicorn.otf") format("truetype"), url("../assets/fonts/unicorn.woff") format("woff"), url("../assets/fonts/unicorn.svg#unicorn") format("svg");
  font-weight: normal;
  font-style: normal;
}

.foo {
  background-image: url("../assets/images/kittens.png");
}

Comments

  1. User Avatar
    Edmundo Junior
    Permalink to comment#

    This is so handy! I’ve always been skeptical of CSS preprocessors, but two weeks ago I started to be “sassy”, and man it’s worth! By the way, your snippets are helping a lot, thanks!

  2. User Avatar
    Charles
    Permalink to comment#

    Hi,
    You CSS Tricks (a thousand times thank you).
    But please help me to understand; after understanding that the example above is using example paths.

    If I have built a site using SASS, SCSS, Compass, Bourbons, Neat et al.
    When I put the site into production, should I not remove all of the above kits using only my create minified style.css.

    I.e I would have thought a cool way to do this then would be to remove the /assets directory.

    Is this “okay” thinking?

    Charles.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag