DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

TYPO3-adx_scss¶

Overview¶

This TYPO3 extension contains the SCSS compiler https://github.com/leafo/scssphp which is compatible with Bootstrap 4.x.

Supports a hook for \TYPO3\CMS\Core\Page\PageRenderer which compiles SCSS files for includeCSS
a function for USER-cObject
hooks for rtehtmlarea, tinymce_rte and tinymce4_rte
and a ViewHelper for Fluid.

To delete or regenerate compiled files proceed the "Flush general caches".

TypoScript¶

TypoScript properties¶

property | description | type | default -------- | ----------- | ---- | ------- variables | Array of variables which schould be included to the compiler. Set the variable name as key and without @. | array | NULL importPaths | Comma seperated string and/or array of directories where should be look at @import. | array|string | NULL targetFilename | If set the compiler will save the file with this name. | string | NULL returnUri | If the keyword absolute is set, the compiler returns the absolute path to the file. If set to siteURL it returns the complete URL with TYPO3_SITE_URL. If TRUE the returned value is the relative path, else if FALSE it will return the parsed content. | boolean|string | NULL formatter | Set the formatter. Options: Nested, Compressed, Compact, Crunched, Debug, Expanded, OutputBlock | string | Nested numberPrecision | Set the numberPrecision | integer | 5 lineNumberStyle | Set the lineNumberStyle. Options: lineComments, debugInfo | string | NULL

Configuration¶

plugin.tx_adxscss {

    # If set the compiler will save the file with this name.
    targetFilename = 

    # Comma seperated string or array with x = directory.
    importPaths = 

    # Set the formatter. Options: Nested (default), Compressed, Compact, Crunched, Debug, Expanded, OutputBlock
    formatter = 

    # Set the numberPrecision (default: 5)
    numberPrecision = 5

    # Set the lineNumberStyle Options: 0 (default), lineComments, debugInfo
    lineNumberStyle = 0

    variables {
        # Place your own variables here.
    }
}

USER-cObject¶

page.headerData.1367742474 = COA
page.headerData.1367742474 {

    # Set the USER content object where you want. The function includeCss will generate the CSS file and append it with the PageRenderer.
    10 = USER
    10.userFunc = AdGrafik\AdxScss\Utility\ScssUtility->includeCss
    10.compilerSettings =< plugin.tx_adxscss
    10.includeCssSettings {
        media = print
    }
    10.file = path/to/my/style-file.scss
    10.data (
$nice-blue: blue;
body {
  border: 1px solid $nice-blue;
}
)
}

ViewHelper¶

Returns parsed SCSS as CSS.

{namespace scss=AdGrafik\AdxScss\ViewHelpers}
<scss:compile data="[string]" variables="[array]" />
<scss:compileAndInclude data="[string]" variables="[array]" />

ViewHelper properties¶

for scss:compile¶

property | description | type | default -------- | ----------- | ---- | ------- data | SCSS data or path and filename to the SCSS file. | string | NULL variables | Array of variables which schould be included to the compiler. Set the variable name as key and without @. | array | NULL importPaths | Comma seperated string and/or array of directories where should be look at @import. | array|string | NULL targetFilename | If set the compiler will save the file with this name. | string | NULL returnUri | If the keyword absolute is set, the compiler returns the absolute path to the file. If set to siteURL it returns the complete URL with TYPO3_SITE_URL. If TRUE the returned value is the relative path, else if FALSE it will return the parsed content. | boolean|string | NULL formatter | Set the formatter. Options: Nested, Compressed, Compact, Crunched, Debug, Expanded, OutputBlock | string | Nested numberPrecision | Set the numberPrecision | integer | 5 lineNumberStyle | Set the lineNumberStyle. Options: lineComments, debugInfo | string | NULL

additinally for scss:compileAndInclude¶

property | description | type | default -------- | ----------- | ---- | ------- includeCssSettings | Same as TYPO3 property page.includeCss but without stdWrap. | array | NULL

Examples¶

XML/HTML:

<scss:compile data="div { color: $color; }" variables="{ color: 'red' }" />

Output:

div { color: red; }

XML/HTML:

<scss:compileAndInclude variables="{ color: 'red' }" includeCssOptions="{ media: 'print' }">
    div {
        color: $color;
    }
</scss:compile>

Output:

<link rel="stylesheet" type="text/css" href="typo3temp/tx_adxscss/compliled.06038bd94eba2da1b219679e2fb8c822-58c67ef417c6c12e5afbe77144770bc9.scss.css" media="print">

Include the css file into the page via PageRenderer.

Hooks¶

PageRenderer¶

page.includeCSS.styles = path/to/my/style-file.scss

tinymce_rte¶

RTE.default.init.content_css = path/to/my/style-file.scss

or append multiply files

RTE.default.init.content_css = path/to/my/style-file-1.scss,path/to/my/style-file-2.scss,path/to/my/style-file-3.scss

tinymce4_rte¶

RTE.default.contentCSS = path/to/my/style-file.scss

or append multiply files by comma seperated string

RTE.default.contentCSS = path/to/my/style-file-1.scss,path/to/my/style-file-2.scss,path/to/my/style-file-3.scss

or append multiply files by key

RTE.default.contentCSS {
    file1 = path/to/my/style-file-1.scss
    file2 = path/to/my/style-file-2.scss
    file3 = path/to/my/style-file-3.scss
}

rtehtmlarea¶

RTE.default.init.contentCSS = path/to/my/style-file.scss

Using in extensions¶

// Create object
$scss = GeneralUtility::makeInstance('AdGrafik\\AdxScss\\Scss');
// Fetch extension configuration. Allowed parameters are cObject or PID.
$configuration = AdGrafik\AdxScss\Utility\ScssUtility::getConfiguration($GLOBALS['TSFE']->cObj);
// Compile the SCSS file. Will return the filepath of the parsed SCSS file.
$pathAndFilename = 'path/to/my/style-file.scss';
$compiledPathAndFilename = $scss->compile($pathAndFilename, $configuration);