DEPRECATION WARNING

This documentation is not using the current rendering mechanism and will be deleted by December 31st, 2020. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Inroduction

This extension compiles scss vhs assets to css with scssphp.

Installation

  • Via TER: Install vhs_scss
  • From Git: Run composer install in the Resources/Private directory. Then install as TYPO3 extension.

No further configuration is necessary.

Usage

Example usage in template:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
 xmlns:scss="http://typo3.org/ns/Casix/VhsScss/ViewHelpers" data-namespace-typo3-fluid="true">
    <!-- basic -->
    <scss:asset.scssStyle path="fileadmin/main.scss" />
    <!-- advanced -->
    <scss:asset.scssStyle path="fileadmin/main.scss" scssVariables="{border: '20px'}" scssLinenumbers="TRUE" scssphpFormatter="Leafo\ScssPhp\Formatter\Compact" />
</html>

The scss file will be compiled and integrated with the rest of the css according to your vhs asset configuration. Scss compilation is cached. The cache is invalidated when any used scss file or the options are modified.

Configuration options in TypoScript (lower in priority than arguments specified on the ViewHelper):

plugin.tx_vhsscss.settings {
    # Formatter to use, see http://leafo.github.io/scssphp/docs/
    formatter = Leafo\ScssPhp\Formatter\Compact
    # Include line number info in output?
    lineNumbers = 0
    # Arbitrary variables to set in the SCSS context
    variables {
        border-width = 40px
    }
}