PHPackages heineref/kirby-scssphp - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. heineref/kirby-scssphp ActiveKirby-plugin heineref/kirby-scssphp ====================== This is a preprocessor for SCSS files to generate CSS files in Kirby. It uses the scssphp library https://scssphp.github.io/scssphp/. This Kirby plugin automatically processes SCSS files when they are changed. Optionally, you can use this Kirby plugin to generate 'Critical CSS'. 2.1.0.0(5mo ago)011MITPHP Since Sep 19Pushed 4mo agoCompare [ Source](https://github.com/HeinerEF/kirby-scssphp)[ Packagist](https://packagist.org/packages/heineref/kirby-scssphp)[ RSS](/packages/heineref-kirby-scssphp/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (2)Versions (7)Used By (0) SCSSPHP Plugin ============== [](#scssphp-plugin) The **SCSSPHP plugin** for Kirby creates the corresponding "**\*.css** file" from a "**\*.scss** file" and automatically integrates it into the invisible <HEAD> area of the website via the stylesheet link line ``. The "**\*.scss** file" can, of course, include any number of additional "**\*.scss** files" using *`@import "..."`* in accordance with the Sass rules, which are also evaluated by the plugin. The plugin can automatically detect whether one of the "**\*.scss** files" used has been changed and then regenerates the "**\*.css** file." Otherwise, only the stylesheet link line with the last generated "**\*.css** file" is provided. It is possible to create different SCSSs for each Kirby template. Just use the name of your template file for the SCSS file (e.g. `article.scss` for `templates/article.php`), and place it in `assets/scss`. If no SCSS file for a template can be found, `default.scss` will be used. It is also possible to use a different SCSS file and/or for other media by adding another call such as "``" into the invisible <HEAD> area of the website code. When the website is accessed by someone logged-in with the role of a `admin`, a detailed "**\*.css** file" is used, which also links to the corresponding SourceMap. This detailed "**\*.css** file" can be examined in detail in the browser, for example with <F12>. All other visitors receive a compressed "**\*.css** file". You can change these roles in the *config* via the `HeinerEF.scssphp.scssDeveloperRoles` option. **Optionally** you can use this Kirby plugin to generate '*critical CSS*'. Please look at *[README\_critical\_CSS.md](README_critical_CSS.md)* for details. This Kirby plugin uses the **SCSSPHP compiler** written in PHP, which was originally developed by *Leaf Corcoran* and is now maintained by *Anthon Pang* and *Cédric Morin*. Installation ------------ [](#installation) ### Download [](#download) [Download](https://github.com/heineref/kirby-scssphp/archive/master.zip) the contents of this repository as Zip file. Rename the **extracted** folder to `heineref_scssphp` and copy it into the `site/plugins/` directory in your Kirby project. If it does not exist, create a new directory `site/plugins/` first. This file `README.md` therefore receives the path `site/plugins/heineref_scssphp/README.md`. ### Composer [](#composer) ``` composer require heineref/kirby-scssphp ``` ### Git submodule [](#git-submodule) If you have used git in your project before: ``` git submodule add https://github.com/heineref/kirby-scssphp.git site/plugins/heineref_scssphp ``` Setup ----- [](#setup) 1. Make sure you backup your original CSS files **beforehand**. 2. Create a folder `scss` inside the `/assets` folder. 3. Create a file `default.scss` with some content and place it inside `assets/scss`. 4. Make sure the folder `/assets/css` exists on your server. 5. Add `'scssNestedCheck' => true` to the config of your **dev environment**. [Read more about multi environment setup for Kirby](https://getkirby.com/docs/guide/configuration#multi-environment-setup). 6. Call the SCSS snippet with `` in your HTML <HEAD> area. Using SCSS plugin ----------------- [](#using-scss-plugin) After installing and setting up this plugin, `assets/css/*.css`-files will be overwritten automatically. Options ------- [](#options) All options require **`HeinerEF.scssphp.`** as prefix. **`scssNestedCheck`** - default: `false` - If true, the plugin checks 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 **SCSSPHP compiler**, on this server and also an another environment when synced. - Look at "`Setup 5.`" for details! **`scssDeveloperRoles`** - default: `['admin']` - Only these roles use the **NOT minified** CSS and can access the corresponding SourceMap. **`scssDevelopment`** - default: `false` - If true, the CSS file is build EVERY time the **SCSSPHP plugin** runs Compatibility ------------- [](#compatibility) Sass is a **CSS** preprocessor language that adds many features such as variables, mixins, imports, nesting, color manipulation, functions, and control directives. For a complete guide to the syntax of Sass, please consult the [official documentation](https://sass-lang.com/documentation). The new implementation v2.x of the **SCSSPHP compiler** is a port of *dart-sass*, making it spec-compliant and easier to update by their developers to support new Sass features. However the actual release does not implement Sass modules yet. Note ---- [](#note) Unlike previous implementations of the **SCSSPHP plugin**, you can now update the **SCSSPHP compiler** independently of the **SCSSPHP plugin**, e.g. using Composer, as long as the compiler calls and data transfer by the **SCSSPHP compiler** remain unchanged. Please **only** update in your development environment! Requirements ------------ [](#requirements) This plugin was built using **Kirby 5.x** and tested with **Kirby 4.x**. It may work with earlier versions. Otherwise, take a look at Disclaimer ---------- [](#disclaimer) This plugin is provided "**as is**" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. License ------- [](#license) [MIT](LICENSE.md) It is not permitted to use this plugin in any project that promotes racism, sexism, homophobia, animal abuse, violence or any form of hate speech. Credits ------- [](#credits) - [Leaf Corcoran et al.](https://github.com/scssphp/scssphp) the **SCSSPHP compiler** written in PHP - [Bart van de Biezen](https://github.com/bartvandebiezen/kirby-v2-scssphp) the initial **Kirby Plugin** - [Jan-Frederik Stieler](https://github.com/janstieler/kirby-v2-scssphp) updated the **Kirby Plugin** to Kirby 3 ### Health Score 33 — LowBetter than 75% of packages Maintenance73 Regular maintenance activity Popularity5 Limited adoption so far Community10 Small or concentrated contributor base Maturity40 Maturing project, gaining track record Bus Factor1 Top contributor holds 91% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~16 days Total 6 Last Release 164d ago Major Versions 1.13.0.4 → 2.1.0.02025-12-06 ### Community Maintainers ![](https://www.gravatar.com/avatar/4b2db6ee567009dbbd8f57db826ebfa2885dde141dbc895624f7c557b00ae6ed?d=identicon)[HeinerEF](/maintainers/HeinerEF) --- Top Contributors [![HeinerEF](https://avatars.githubusercontent.com/u/219549291?v=4)](https://github.com/HeinerEF "HeinerEF (61 commits)")[![janstieler](https://avatars.githubusercontent.com/u/754880?v=4)](https://github.com/janstieler "janstieler (2 commits)")[![OscarGodson](https://avatars.githubusercontent.com/u/20615?v=4)](https://github.com/OscarGodson "OscarGodson (2 commits)")[![tomknig](https://avatars.githubusercontent.com/u/3586316?v=4)](https://github.com/tomknig "tomknig (2 commits)") --- Tags cssheinerefkirby-cmskirby-pluginkirby4kirby5phpscssscssphpstylesheetcssscssstylesheetkirby-pluginkirby-cmskirby5scssphpkirby4HeinerEF ### Embed Badge ![Health badge](/badges/heineref-kirby-scssphp/health.svg) ``` [![Health](https://phpackages.com/badges/heineref-kirby-scssphp/health.svg)](https://phpackages.com/packages/heineref-kirby-scssphp) ``` ### Alternatives [scssphp/scssphp scssphp is a compiler for SCSS written in PHP. 62827.7M220](/packages/scssphp-scssphp)[pechente/kirby-admin-bar Kirby Admin Bar 512.2k](/packages/pechente-kirby-admin-bar)[beebmx/kirby-env Enable env variables to Kirby 2037.9k2](/packages/beebmx-kirby-env)[bnomei/kirby3-redirects Setup performant HTTP Status Code Redirects from within the Kirby Panel 269.1k](/packages/bnomei-kirby3-redirects)[beebmx/kirby-courier Courier offers a convenient and painless solution for creating emails tailored for your Kirby website. 403.0k2](/packages/beebmx-kirby-courier)[bnomei/kirby3-htmlhead Kirby Plugin for a best-practice HTML Head Element extendable with snippets. 253.8k](/packages/bnomei-kirby3-htmlhead) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)