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");
}
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!
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.
Be simple. in SASS/SCSS simply write variable
$assetPath : "images/img";
background: url(#{$assetPath}/pk-bg.jpg) no-repeat center top;
This will 100% work!