Skip to content
dleffler edited this page Jul 4, 2018 · 4 revisions

Here is some info on outputting source maps with scssphp. Source Maps are useful in debugging compiled css files using browser developer tools.

    $scss_fname = '/framework/scss/test.scss';  // input file
    $css_fname = '/framework/css/test.css';  // output file
    $vars = array(); // scss variables to pass

    include_once('scss.inc.php');
    $scss = new \Leafo\ScssPhp\Compiler();

    $scss->setSourceMap(Compiler::SOURCE_MAP_FILE);  // SOURCE_MAP_NONE, SOURCE_MAP_INLINE, or SOURCE_MAP_FILE
    $scss->setSourceMapOptions(array(
        // absolute path to write .map file
        'sourceMapWriteTo'  => '/srv/www/tmp/css/' . str_replace("/", "_", $scss_fname) . ".map",
        // relative or full url to the above .map file
        'sourceMapURL'      => '/tmp/css/' . str_replace("/", "_", $scss_fname) . ".map",
        // (optional) relative or full url to the .css file
        'sourceMapFilename' => $css_fname,  // url location of .css file
        // partial path (server root) removed (normalized) to create a relative url
        'sourceMapBasepath' => '/srv/www',  // difference between file & url locations, removed from ALL source files in .map
        // (optional) prepended to 'source' field entries for relocating source files
        'sourceRoot'        => '/',
    ));

    $scss->setVariables($vars);
    $css = $scss->compile(file_get_contents($scss_fname), $scss_fname);  // this call takes care of saving/embedding the map file
    file_put_contents($css, $css_fname);  // save the compiled css file
Clone this wiki locally