wapplersystems/ws_less

LESS compiler for TYPO3. Compiles LESS files to CSS files.

Maintainers

Details

github.com/WapplerSystems/ws_less

Source

Issues

Installs: 2 175

Dependents: 0

Suggesters: 0

Security: 0

Stars: 7

Watchers: 4

Forks: 24

Open Issues: 12

Type:typo3-cms-extension

12.0.1 2023-10-25 13:53 UTC

Requires

GPL-2.0+ ac3337922d7944e9e101c612c742bb5e6045c1ff

This package is auto-updated.

Last update: 2024-04-25 14:52:25 UTC

README

ext_icon.png

License: GNU GPL, Version 2

Repository: https://github.com/svewap/ws_less

Please report bugs here: https://github.com/svewap/ws_less/issues

TYPO3 version: >8.7

About

ws_less is a TYPO3 LESS compiler for compiling LESS files into CSS files. This extensions uses the LessPHP compiler.

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

You can pass values via TypoScript to the LESS files.

Usage

To include your LESS file, you can use the page.includeCSS TypoScript command as usual.

page.includeCSS {
  bootstrap = fileadmin/bootstrap/less/bootstrap.less
  bootstrap.outputdir = fileadmin/bootstrap/css/

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

  rte = fileadmin/bootstrap/less/rte.less
  rte.outputdir = fileadmin/rte/css/
  rte.doNotHash = 1 # Disable file name hashing when using LESS variables via TypoScript
}

You can also leave off the outputdir parameter. The extension will be writing the CSS files into the typo3temp/ws_less directory.

Variables

You can set LESS variables in TypoScript in template setup part of your template:

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

Disable file name hashing

For including the generated CSS files in your ckeditor YAML config file it is recommended to use the doNotHash = 1 parameter. When using LESS variables the generated file will be fileadmin/rte/css/rte.css instead of fileadmin/rte/css/rte_468e20047a2589981edd540b083f26c4.css so you can easily include it in your RTE YAML config using "contentsCss: "fileadmin/rte/css/rte.css"

Development Notice

For developing it is suggested to force-render the template (switching off the TYPO3 template cache) using admPanel.override.tsdebug.forceTemplateParsing = 1 in your backend user's UserTS config. The LESS files will be compiled on each page load while being logged in as a backend user so you can see the result of your changes without repeatedly clearing the TYPO3 FE cache.

Credits