PHPackages svewap/ws-scss - 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. [Utility & Helpers](/categories/utility) 4. / 5. svewap/ws-scss Abandoned → [wapplersystems/ws-scss](/?search=wapplersystems%2Fws-scss)Typo3-cms-extension[Utility & Helpers](/categories/utility) svewap/ws-scss ============== Compiles SCSS to CSS at runtime with caching, TypoScript variables and EXT: import support 14.0.5(1mo ago)11104.1k↓58%30[26 issues](https://github.com/WapplerSystems/ws_scss/issues)[10 PRs](https://github.com/WapplerSystems/ws_scss/pulls)GPL-2.0-or-laterPHPPHP ^8.2 Since Aug 29Pushed 1mo ago8 watchersCompare [ Source](https://github.com/WapplerSystems/ws_scss)[ Packagist](https://packagist.org/packages/svewap/ws-scss)[ Docs](https://github.com/WapplerSystems/ws_scss)[ RSS](/packages/svewap-ws-scss/feed)WikiDiscussions release/v14 Synced 2d ago READMEChangelogDependencies (6)Versions (58)Used By (0) SASS Compiler for TYPO3 (ws\_scss) ================================== [](#sass-compiler-for-typo3-ws_scss) Compiles SCSS files to CSS at runtime. Uses [SCSSPHP](https://scssphp.github.io/scssphp/) as compiler. Compiled CSS is cached and only recompiled when source files or variables change. Installation ------------ [](#installation) ``` composer require wapplersystems/ws-scss ``` Requirements ------------ [](#requirements) - TYPO3 v14 - PHP 8.2+ Usage via TypoScript -------------------- [](#usage-via-typoscript) Include SCSS files with the standard `page.includeCSS` — the extension automatically compiles any `.scss` file: ``` page.includeCSS { main = EXT:my_sitepackage/Resources/Private/Scss/main.scss } ``` ### Custom output file [](#custom-output-file) ``` page.includeCSS { bootstrap = fileadmin/bootstrap/sass/bootstrap.scss bootstrap.outputfile = fileadmin/bootstrap/css/mybootstrap.css } ``` ### Output style [](#output-style) `compressed` (default) or `expanded`: ``` page.includeCSS { main = EXT:my_sitepackage/Resources/Private/Scss/main.scss main.outputStyle = expanded } ``` ### Source maps [](#source-maps) Enables SCSS file/line references in browser DevTools: ``` page.includeCSS { main = EXT:my_sitepackage/Resources/Private/Scss/main.scss main.sourceMap = true } ``` ### Inline output [](#inline-output) Renders CSS inline in a `` tag instead of a `` reference: ``` page.includeCSS { critical = EXT:my_sitepackage/Resources/Private/Scss/critical.scss critical.inlineOutput = true } ``` Variables --------- [](#variables) ### Global variables [](#global-variables) Available in all SCSS files: ``` plugin.tx_wsscss.variables { primaryColor = #007bff secondaryColor = #6c757d baseFontSize = 16px } ``` ### Per-file variables [](#per-file-variables) Override or extend global variables for a specific file: ``` page.includeCSS { main = EXT:my_sitepackage/Resources/Private/Scss/main.scss main.variables { primaryColor = #ff6600 containerWidth = 1200px } } ``` ### Using variables in SCSS [](#using-variables-in-scss) Variables defined via TypoScript are directly available as SCSS variables: ``` body { color: $primaryColor; font-size: $baseFontSize; } ``` ### Variable type conversion [](#variable-type-conversion) The extension automatically converts TypoScript values to proper SCSS types: TypoScript valueSCSS type`#007bff`Color (RGB)`16px`Number with px unit`1.5rem`Number with rem unit`"Arial, sans-serif"`StringOther valuesGeneric valueSCSS imports ------------ [](#scss-imports) Standard SCSS imports work as expected. Additionally, the extension supports TYPO3's `EXT:` paths: ``` @import "variables"; @import "mixins"; @import "EXT:bootstrap/Resources/Public/Scss/bootstrap"; ``` File resolution order: `filename.scss`, `_filename.scss`, `filename.css`. Usage via Fluid ViewHelper -------------------------- [](#usage-via-fluid-viewhelper) The extension registers a ViewHelper for compiling SCSS in Fluid templates. ### File-based [](#file-based) ``` ``` ### With variables [](#with-variables) ``` ``` ### Inline SCSS [](#inline-scss) ``` $color: red; body { background: $color; } ``` ### ViewHelper arguments [](#viewhelper-arguments) ArgumentTypeRequiredDescription`identifier`stringyesUnique ID for asset deduplication`href`stringnoPath to SCSS file (`EXT:` or `fileadmin/`)`scssVariables`arraynoVariables to pass to the compiler`outputfile`stringnoCustom path for compiled CSS output`forcedOutputLocation`stringnoForce `inline` or `file` output`priority`boolnoLoad before other stylesheets`disabled`boolnoAdd `disabled` attributeEvents ------ [](#events) ### AfterVariableDefinitionEvent [](#aftervariabledefinitionevent) Modify variables before compilation: ``` use WapplerSystems\WsScss\Event\AfterVariableDefinitionEvent; #[AsEventListener] final class AddDynamicVariables { public function __invoke(AfterVariableDefinitionEvent $event): void { $variables = $event->getVariables(); $variables['dynamicColor'] = '#ff0000'; $event->setVariables($variables); } } ``` ### AfterScssCompilationEvent [](#afterscsscompilationevent) Post-process compiled CSS: ``` use WapplerSystems\WsScss\Event\AfterScssCompilationEvent; #[AsEventListener] final class PostProcessCss { public function __invoke(AfterScssCompilationEvent $event): void { $css = $event->getCssCode(); $css .= "\n/* Compiled at " . date('c') . " */"; $event->setCssCode($css); } } ``` Caching ------- [](#caching) Compiled CSS is cached in `typo3temp/assets/css/`. The cache is automatically invalidated when: - SCSS source files change - Imported files change - Variables change - Output style or source map settings change To force recompilation, flush caches via backend or CLI: ``` vendor/bin/typo3 cache:flush --group=system ``` ### Development tip [](#development-tip) Disable the TypoScript template cache in your backend user settings to trigger SCSS recompilation on every page load during development. Complete example ---------------- [](#complete-example) ``` plugin.tx_wsscss.variables { brandColor = #0066cc fontFamily = "Open Sans, sans-serif" baseFontSize = 16px } page.includeCSS { bootstrap = EXT:my_sitepackage/Resources/Private/Scss/bootstrap.scss bootstrap.outputStyle = compressed theme = EXT:my_sitepackage/Resources/Private/Scss/theme.scss theme.outputStyle = compressed theme.variables { headerHeight = 80px sidebarWidth = 300px } } ``` License ------- [](#license) GPL-2.0-or-later ### Health Score 61 — FairBetter than 98% of packages Maintenance72 Regular maintenance activity Popularity41 Moderate usage in the ecosystem Community24 Small or concentrated contributor base Maturity89 Battle-tested with a long release history Bus Factor1 Top contributor holds 75% 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 ~63 days Recently: every ~23 days Total 51 Last Release 40d ago Major Versions 11.0.2 → 12.0.02023-01-16 11.0.3 → 12.0.42024-02-15 12.0.5 → 13.0.02024-09-25 13.1.6 → 14.0.02025-11-29 13.1.7 → 14.0.22026-04-13 PHP version history (9 changes)1.1.13PHP ^7.1 1.1.17PHP ^7.2 1.2.0PHP ^7.4 || ^8.0 11.0.0PHP ^8.0 11.0.2PHP ^8.0 || ^8.1 12.0.0PHP ^8.0 || ^8.1 || ^8.2 13.0.0PHP ^8.0 || ^8.1 || ^8.2 || ^8.3 14.0.0PHP ^8.2 || ^8.3 || ^8.4 14.0.2PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/a944bb90af783b13d74049f2d8adcff598f4e7cb0aad9d7040a6af0bb8c23984?d=identicon)[svewap](/maintainers/svewap) --- Top Contributors [![svewap](https://avatars.githubusercontent.com/u/1734738?v=4)](https://github.com/svewap "svewap (60 commits)")[![davidjakob](https://avatars.githubusercontent.com/u/4965254?v=4)](https://github.com/davidjakob "davidjakob (7 commits)")[![maechler](https://avatars.githubusercontent.com/u/4113819?v=4)](https://github.com/maechler "maechler (2 commits)")[![xerc](https://avatars.githubusercontent.com/u/1372590?v=4)](https://github.com/xerc "xerc (2 commits)")[![andreashager](https://avatars.githubusercontent.com/u/3351175?v=4)](https://github.com/andreashager "andreashager (1 commits)")[![nhovratov](https://avatars.githubusercontent.com/u/19343425?v=4)](https://github.com/nhovratov "nhovratov (1 commits)")[![pfinkbeiner](https://avatars.githubusercontent.com/u/722890?v=4)](https://github.com/pfinkbeiner "pfinkbeiner (1 commits)")[![soulik](https://avatars.githubusercontent.com/u/740968?v=4)](https://github.com/soulik "soulik (1 commits)")[![TobiFerger](https://avatars.githubusercontent.com/u/150025865?v=4)](https://github.com/TobiFerger "TobiFerger (1 commits)")[![marvincarstensen](https://avatars.githubusercontent.com/u/5238390?v=4)](https://github.com/marvincarstensen "marvincarstensen (1 commits)")[![cowboyxup](https://avatars.githubusercontent.com/u/13420422?v=4)](https://github.com/cowboyxup "cowboyxup (1 commits)")[![devtroll](https://avatars.githubusercontent.com/u/3763384?v=4)](https://github.com/devtroll "devtroll (1 commits)")[![GalileoWebagentur](https://avatars.githubusercontent.com/u/40769979?v=4)](https://github.com/GalileoWebagentur "GalileoWebagentur (1 commits)") --- Tags sassscsstypo3typo3-extensioncsssassscsscompilertypo3scssphp ### Embed Badge ![Health badge](/badges/svewap-ws-scss/health.svg) ``` [![Health](https://phpackages.com/badges/svewap-ws-scss/health.svg)](https://phpackages.com/packages/svewap-ws-scss) ``` ### Alternatives [wapplersystems/ws-scss Compiles SCSS to CSS at runtime with caching, TypoScript variables and EXT: import support 11149.9k8](/packages/wapplersystems-ws-scss)[scssphp/scssphp scssphp is a compiler for SCSS written in PHP. 62930.2M317](/packages/scssphp-scssphp)[friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 103519.9k53](/packages/friendsoftypo3-content-blocks)[typo3/cms-styleguide TYPO3 extension to showcase TYPO3 Backend capabilities 106760.3k33](/packages/typo3-cms-styleguide)[wazum/sluggi TYPO3 extension for URL slug management with inline editing, auto-sync, locking, access control, and redirects 40529.5k](/packages/wazum-sluggi)[jweiland/events2 Events 2 - Create single and recurring events 2166.7k3](/packages/jweiland-events2) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)