This is available since release 2013-12-08 “Binky”.
LESS is a dynamic stylesheet language that compiles to CSS. It offers new mechanisms like variables, nesting, mixins, operators and functions when writing stylesheets.
DokuWiki's CSS dispatcher includes a PHP-based LESS parser which means you can use the full advantage of this dynamic CSS preprocessing in your template and plugin styles. Of course this is completely optional you can also write plain old CSS.
LESS statements are parsed in .css
and in .less
files.
Please refer to the official lesserphp documentation1) to learn about the language itself. We're using lesserphp as a parser so any restrictions of that library apply (eg. you can't use JavaScript expressions).
When using LESS please keep the following things in mind:
style.ini placeholders are available in your styles as LESS variables, prefixed with @ini_
and with the __
removed.
E.g. the __background__
placeholder becomes @ini_background
in your LESS styles.
At the moment (current date: 2021-12-30) the newest version of lesserphp is 0.5.5, which is included in DokuWiki “Hogfather”. Although the publication date of version 0.5.5 is March 10 2021 (Changelog) there has been only mostly PHP compatibility changes since 2016. That means some features of the current less.js (which is the primary less-compiler) are not supported by this version.
Nevertheless you can achieve advanced technics, but less convenient. As shown in the following realization of an “IF-Statement”, which is capable to include or exclude several CSS-rules at once.
This LESS-code:
@my-option: false; .my-optional-style() when (@my-option = false) { #main_body { background-color: red; } p { color: green; } } .my-optional-style() when (@my-option = true) { #main_body { background-color: green; } p { color: black; } } .my-optional-style();
compiles to this CSS-code:
#main_body { background-color: red; } p { color: green; }
Add code example here
Because all CSS has to pass through the LESS parser, we're a bit more strict on valid CSS. If your plugin uses invalid CSS it will likely throw an error now. A list of currently known problems is available at Less CSS Errors.