SASS addon for the Assets plugin for PHP Fat-Free Framework
When you have F3-Assets already up and running, just run
composer require ikkez/f3-assets-sass.
In case you do not use composer, copy the
assets/ folder into your
AUTOLOAD path, install scssphp/scssphp separately and you should be ready to go.
To register the sass compiler, just add this line to your view controller, or where ever you have put the initialisation of the main assets plugin.
// register sass handler \Assets\Sass::instance()->init();
Within your templates you can then easily use
.scss files directly, as it would be normal css files.
<link rel="stylesheet" href="scss/main_styles.scss">
That's it. Compilation, minification and concatenation with other files is now handled by the assets plugin.
The base directory of the sass file can also be used as import path,
@import within your sass file can be used to load other relative sass files. So recompiling a whole bootstrap frontend is not problem:
<link rel="stylesheet" href="components/MDBootstrap/sass/mdb.scss">
The only drawback with
@include files is, that changes to those files are currently not detected automatically,
so the whole main sass file does not update on the fly. However, you can add the
watch attribute and define
one or multiple paths to scan for file changes - wildcards are possible:
<link rel="stylesheet" href="components/MDBootstrap/sass/mdb.scss" watch="custom.scss"> <link rel="stylesheet" href="components/MDBootstrap/sass/mdb.scss" watch="custom.scss, addons/*.scss">
watch-attribute should only be considered while working on the files, because scanning for file modification times isn't necessary for production-ready styles and would, depending on the amount of files to scan, slow things down.
If you need to refresh files on a production environment, it's recommended to clear the temp files with
\Assets::instance()->clear();, instead of proactive looking for changes.
If you like to add sass files programmatically, you should simply treat them like normal css files:
$opt = [ 'watch'=>'ext/*.scss' ]; \Assets::instance()->add('scss/main_styles.scss', 'css', 'head', 5, NULL, $opt);