Einfache Asset-Hilfsfunktionen

Der Umgang mit Pfaden ist immer etwas mühsam, das wirst du zugeben. Glücklicherweise ist es mit Sass extrem einfach, eine schöne API zur Verwaltung von Assets zu haben und den Code wartungsfreundlich zu halten. Alles, was wir brauchen, ist, den Basis-Asset-Pfad in einer Variablen zu speichern und ein paar Funktionen zu haben, um unsere API zu erstellen.

/// 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);
}

Verwendung

@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");
}