Darbs ar ceļiem vienmēr ir mazliet kaitinošs, jūs piekāpsieties. Par laimi, ar Sass ir ārkārtīgi viegli izveidot skaistu API aktīvu pārvaldīšanai un koda uzturēšanai vienkārši. Vienīgais, kas mums nepieciešams, ir bāzes aktīvu ceļa saglabāšana mainīgajā un pāris funkcijas, lai izveidotu mūsu 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); )Lietošana
@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.webp'); )@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.webp"); )