Created a new Kirby 2 plugin for Sass. It will automatically compile your Sass code when changed on the server. It also includes strong minification.
For the people who prefer to work with Less. I also updated Jan Stieler’s plugin for Less to work with Kirby 2.
Hope you like it. Improvements are always welcome.
Gr. Bart
Thanks for the plugins, @bartvandebiezen. I think that it can greatly improve the workflow. I have noticed some small errors (typos) in the LESS-snippet-file.
// Your main SCSS file.
$sourceFile = $root . "/assets/scss/style.scss";
Cheers, Tim
Thanks. I am looking at the code but cannot see the typos. 
What would you like to see fixed?
Gr. Bart
In the LESS-Snippet you have written:
// Your main SCSS file.
$sourceFile = $root . "/assets/scss/style.scss";
But it should be
// Your main LESS file.
$sourceFile = $root . "/assets/less/style.less";Was looking at the SCSS plugin. 
Thanx! Fixed it right away.
haha, no problem 
Thank you!
Thanks @bartvandebiezen for updating the plugin.
I will post a link to it on the Version 1 from me on Github.
@JanStieler Thanx and thank you for the first version. 
I improved the Less plugin even further. Now it works with the library from Josh Schmidt. His version compiles a newer version of Less (i.e. 1.7) and his repository seems more active, compared to leafo’s repository.
hi @bartvandebiezen,
unfortunately I have just a vague idea what scss / sass is all about.
I understood, that SCSS is a script language file, that is compiled with SASS (or LESS?) to become a native CSS file.
Correct?
So, if I wanted to work with this, I need to understand SCSS first?
(…and first of all, understand CSS ;))
hi @andi242
Yes, that is correct. But it is easier than you would think. If you understand CSS, you can start with SCSS or Less right away. Just place all the CSS you have in a new file and use the file extension .scss or .less. You are now using SCSS or Less You don’t have to do anything else but you can then slowly add SCSS or Less specific features. A simple example:
SCSS variable:
$color-primary: #f00; // For less this would be '@color-primary'.
And use it as:
.button {
background-color: $color-primary;
}
I created a bundle of best practices for CSS and CSS preprocessors (e.g. Less or Sass): https://github.com/bartvandebiezen/css-conventions This is somewhat more advanced, but maybe it is useful.
Thank you! I will give it a try
If I understood correctly, your plugin will create any .css file if there is a .scss file in the folders.
Like style.scss to style.css and custom.scss to custom.css, right?
You need two files:
You can change the directories or file names, but then you need to change the plugin.
Just uploaded a new major addition to the SCSSPHP plugin. Now you can automatically generate critical CSS, increasing the performance of your website. It works really well with my own setup 
Hi @bartvandebiezen,
Thanks for the plugin, awesome work!
Seems to be going all fine when working in the style.less file but I can’t get the @import rule to work, in order the organize my style in several .less files. Any idea what could cause this ?
I imported the plugin in an ongoing project so I know the problem can’t come from the less syntax…
@bartvandebiezen:
Thanks for your plugin for Sass, awesome work!
I have added some extensions to the snippet file scss.php:
<?php
/**
* SCSS Snippet
* @author Bart van de Biezen <bart@bartvandebiezen.com>
* @link https://github.com/bartvandebiezen/kirby-v2-scssphp
* @return CSS and HTML
* @version 1.0.1
* @extension 2016-06-03 by HeinerEF ("DS" by reason of OS Windows, $IsDeveloper, NOT minified CSS file only for Developers)
*/
use Leafo\ScssPhp\Compiler;
// Using realpath seems to work best in different situations.
$root = realpath(__DIR__ . DS . '..' . DS . '..');
// Set file paths. Used for checking and updating CSS file for current template.
$template = $page->template();
$SCSS = $root . DS . 'assets' . DS . 'scss' . DS . $template . '.scss';
$minCSS = $root . DS . 'assets' . DS . 'css' . DS . $template . '.min.css';
$orgCSS = $root . DS . 'assets' . DS . 'css' . DS . $template . '.css';
$minCSSKirbyPath = 'assets/css/' . $template . '.min.css';
$orgCSSKirbyPath = 'assets/css/' . $template . '.css';
// Set default SCSS if there is no SCSS for current template. If template is default, skip check.
if ($template == 'default' or !file_exists($SCSS)) {
$SCSS = $root . DS . 'assets' . DS . 'scss' . DS . 'default.scss';
$minCSS = $root . DS . 'assets' . DS . 'css' . DS . 'default.min.css';
$orgCSS = $root . DS . 'assets' . DS . 'css' . DS . 'default.css';
$minCSSKirbyPath = 'assets/css/default.min.css';
$orgCSSKirbyPath = 'assets/css/default.css';
}
$IsDeveloper = FALSE; // default => CSS is minified.
$username = '<not logged in user>';
if($user = site()->user()) {
$IsDeveloper = (in_array($user->role()->id(), c::get('scssDeveloperRoles', array('admin')))); // these roles use the NOT minified CSS.
$username = $user->username();
};
# echo '<!-- $user = "' . $user . '", $IsDeveloper = "' . r(($IsDeveloper == TRUE), 'TRUE', 'FALSE') . '"' . " -->\n "; // activate this line only for debuging of 'site/config/config.php'.
// For when the plugin should check if partials are changed. If any partial is newer than the main SCSS file, the main SCSS file will be 'touched'. This will trigger the compiler later on, on this server and also an another environment when synced.
if (c::get('scssNestedCheck')) {
$SCSSDirectory = $root . DS . 'assets' . DS . 'scss' . DS;
$files = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($SCSSDirectory));
foreach ($files as $file) {
if (pathinfo($file, PATHINFO_EXTENSION) == "scss" && filemtime($file) > filemtime($SCSS)) {
touch ($SCSS);
clearstatcache();
break;
}
}
}
// Get file modification times. Used for checking if update is required and as version number for caching.
$SCSSFileTime = filemtime($SCSS);
$CSSFileTime = filemtime($minCSS);
// Update CSS when needed.
if (!file_exists($minCSS) or $SCSSFileTime > $CSSFileTime ) {
// time stamp
$stamp = '/* Last update ' . date("Y-m-d H:i:s P") . ' by SCSSPHP Plugin and ' . $username . ' */' . "\n";
// Activate library.
require_once $root . DS . 'site' . DS . 'plugins' . DS . 'scssphp' . DS . 'scss.inc.php';
$parser = new Compiler();
// Setting compression provided by library.
# $parser->setFormatter('Leafo\ScssPhp\Formatter\Compressed'); // ORG, but compression not required here, if CSS is minified.
$parser->setFormatter('Leafo\ScssPhp\Formatter\Expanded'); // for easier debuging of the CSS, if CSS is NOT minified.
// Setting relative @import paths.
$importPath = $root . DS . 'assets' . DS . 'scss';
$parser->addImportPath($importPath);
// Place SCSS file in buffer.
$buffer = file_get_contents($SCSS);
// Compile content in buffer.
$buffer = $parser->compile($buffer);
// Update NOT minified CSS file.
file_put_contents($orgCSS, $stamp . $buffer);
// Minify the CSS even further.
require_once $root . DS . 'site' . DS . 'plugins' . DS . 'scssphp' . DS . 'minify.php';
$buffer = minifyCSS($buffer);
// Update minified CSS file.
file_put_contents($minCSS, $buffer);
}
?>
<link rel="stylesheet" href="<?php echo url(r($IsDeveloper, $orgCSSKirbyPath, $minCSSKirbyPath)); ?>?version=<?php echo $CSSFileTime; ?>">
Good luck!
i had leafo’s lib installed with composer once but it failed to compile foundation. so i will give josh schmidt compiler a try. thx for the plugin.
@bartvandebiezen:
We have to eliminate an error in the file \site\plugins\scssphp\minify.php of your plugin for Sass:
Change line 17 from
$buffer = preg_replace('/(?<=[^1-9])(0+)(?=\.)/', '', $buffer);
to
$buffer = preg_replace('/(?<=[^0-9])(0+)(?=\.)/', '', $buffer);
We need this, if e.g. a filename like “sourcesanspro-300.woff” is in a scss file.
Hi All, I am brand new to Kirby and found this plugin which I think is fantastic. Thank you to the creator. I have been trying to solve an issue for a few hours now to no avail.
My issue: I apologize in advance for the length but wanted to be thorough with my attempts.
I have been trying to get Foundation 6 to work with this plugin to no avail. Here is my folder structure.
Foundation installed via Bower
foundation-sites
jquery
what-input
0-plugins
_example.scss
_example2.scss
_base-dir.scss (imports ex 1 & 2)
1-base
_example.scss
_example2.scss
_base-dir.scss (imports ex 1 & 2)
2-layouts
_example.scss
_example2.scss
_base-dir.scss (imports ex 1 & 2)
3-modules
_example.scss
_example2.scss
_base-dir.scss (imports ex 1 & 2)
components (Foundation default)
building-blocks
_responsive-hero-section.scss
_app.scss (all imports and includes from Foundation)
_mixins.scss
_settings.scss (Foundation defaults)
_variables.scss
default.scss (plugin default)
##Steps/Attempts
Inside default.scss I have attempted to import _app.scss and I can import any of the custom *-dir.scss files, however, if any of the files contain any Foundation references I get an error, here is an example:
Fatal error: Uncaught exception ‘Leafo\ScssPhp\Exception\CompilerException’ with message ‘Undefined mixin add-foundation-colors: line: 77’ in /Users/bbird/PhpstormProjects/cbtravel.com-kirby/site/plugins/scssphp/src/Compiler.php:3296 Stack trace: #0 /Users/bbird/PhpstormProjects/cbtravel.com-kirby/site/plugins/scssphp/src/Compiler.php(1688): Leafo\ScssPhp\Compiler->throwError(‘Undefined mixin…’) #1 /Users/bbird/PhpstormProjects/cbtravel.com-kirby/site/plugins/scssphp/src/Compiler.php(1204): Leafo\ScssPhp\Compiler->compileChild(Array, Object(Leafo\ScssPhp\Formatter\OutputBlock)) #2 /Users/bbird/PhpstormProjects/cbtravel.com-kirby/site/plugins/scssphp/src/Compiler.php(3198): Leafo\ScssPhp\Compiler->compileChildrenNoReturn(Array, Object(Leafo\ScssPhp\Formatter\OutputBlock)) #3 /Users/bbird/PhpstormProjects/cbtravel.com-kirby/site/plugins/scssphp/src/Compiler.php(1368): Leafo\ScssPhp\Compiler->importFile(‘/Users/bbird/Ph…’, Object(Leafo\ScssPhp\Formatter\OutputBlock)) #4 /Users/bbird/PhpstormProjects/cbtravel.com-kirby/si in /Users/bbird/PhpstormProjects/cbtravel.com-kirby/site/plugins/scssphp/src/Compiler.php on line 3296
Any help and insight on how I can correct this issue is greatly appreciated.