Download the PHP package svewap/ws-scss without Composer
On this page you can find all versions of the php package svewap/ws-scss. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package ws-scss
SASS Compiler for TYPO3 (ws_scss)
Compiles SCSS files to CSS at runtime. Uses SCSSPHP as compiler. Compiled CSS is cached and only recompiled when source files or variables change.
Installation
Requirements
- TYPO3 v14
- PHP 8.2+
Usage via TypoScript
Include SCSS files with the standard page.includeCSS — the extension automatically compiles any .scss file:
Custom output file
Output style
compressed (default) or expanded:
Source maps
Enables SCSS file/line references in browser DevTools:
Inline output
Renders CSS inline in a <style> tag instead of a <link> reference:
Variables
Global variables
Available in all SCSS files:
Per-file variables
Override or extend global variables for a specific file:
Using variables in SCSS
Variables defined via TypoScript are directly available as SCSS variables:
Variable type conversion
The extension automatically converts TypoScript values to proper SCSS types:
| TypoScript value | SCSS type |
|---|---|
#007bff |
Color (RGB) |
16px |
Number with px unit |
1.5rem |
Number with rem unit |
"Arial, sans-serif" |
String |
| Other values | Generic value |
SCSS imports
Standard SCSS imports work as expected. Additionally, the extension supports TYPO3's EXT: paths:
File resolution order: filename.scss, _filename.scss, filename.css.
Usage via Fluid ViewHelper
The extension registers a ViewHelper for compiling SCSS in Fluid templates.
File-based
With variables
Inline SCSS
ViewHelper arguments
| Argument | Type | Required | Description |
|---|---|---|---|
identifier |
string | yes | Unique ID for asset deduplication |
href |
string | no | Path to SCSS file (EXT: or fileadmin/) |
scssVariables |
array | no | Variables to pass to the compiler |
outputfile |
string | no | Custom path for compiled CSS output |
forcedOutputLocation |
string | no | Force inline or file output |
priority |
bool | no | Load before other stylesheets |
disabled |
bool | no | Add disabled attribute |
Events
AfterVariableDefinitionEvent
Modify variables before compilation:
AfterScssCompilationEvent
Post-process compiled CSS:
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:
Development tip
Disable the TypoScript template cache in your backend user settings to trigger SCSS recompilation on every page load during development.
Complete example
License
GPL-2.0-or-later