SCSS

  • t3foundation will compile your extension's SCSS files. But not only that.
  • t3foundation integrates your TYPO3 constants into your SCSS files!

Sample

// EXT:my_ext/Configuration/TypoScript/constants.typoscript
plugin.my_ext.background-color = #DEDEDE
plugin.my_ext.font-famliy      = Sans, Arial, Courier
...

// EXT:my_ext/Configuration/TypoScript/setup.typoscript
lib.scssVariables.background-color = {$plugin.my_ext.background-color}
lib.scssVariables.font-famliy      = {$plugin.my_ext.font-famliy}
...
Copied! 
// EXT:my_ext/Resources/Public/Scss/_variables.scss
$background-color = #FFFFFF !default
$font-famliy      = Courier, Arial !default 
...
Copied!

Workflow

  • t3foundation compiles the SCSS files.
  • If there is a lib.scssVariables array in the TypoScript setup, t3foundation will take each element and replace its value in an SCSS file if there is a variable with the same name and a value marked !default.
  • Pay attention to unique variables in your SCSS files. If you have defined a variable twice, the value substitution may not be correct.

Foundation variables

If you want to familiarize yourself with the variables of Foundation, please search for !default in EXT:t3foundation/Resources/Public/Scss/foundation-6.7.4/.