LessPHP for TYPO3

Version

13.0

Rendered

Tue, 08 Jul 2025 12:56:25 +0000

Classification

ws_less

Keywords

css, less

Author

Sven Wappler

Email

typo3@wappler.systems

Language

en

Table of Contents

What does it do?

This extension compiles the less files into the css file format. To include your less file, you can use the page.includeCSS typoscript command as usual.

This extensions uses the LessPHP compiler.

The extension comes with a cache function. That means, that the less files will be compiled only if necessary.

You can pass values via typoscript to the less files.

Usage

Use the includeCSS command and define the output dir:

page.includeCSS {

  bootstrap = fileadmin/bootstrap/less/bootstrap.less
  bootstrap.outputdir = fileadmin/bootstrap/css/
  
  responsive = fileadmin/bootstrap/less/responsive.less
  responsive.outputdir = fileadmin/bootstrap/css/

}
Copied!

You can also leave off the outputdir . Then the extension writes the css files into the typo3temp/ws_less dir.

Variables: You can set less variables in typoscript in template setup part of your template:

plugin.tx_wsless.variables {
  var1 = #000
  var2 = #666
}
Copied!

For developing it is practical, if you force to render the template (switch off the TYPO3 template cache). Then the less files will be compiled after modification and you can see the result of your changes. Go into your backend user settings and use this command:

|img-3|

Credits

Sven Wappler. TYPO3 Agentur Aachen

Special thank to Jozef Spisiak from www.pixelant.net for optimizing the extension.