It's better when it's simple

User Tools

Site Tools


Translations of this page?:

Learn about DokuWiki

Advanced Use

Corporate Use

Our Community

Follow us on Facebook, Twitter and other social networks.

Our Privacy Policy


LESS CSS Support in DokuWiki

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.

LESS Language Constructs

Please refer to the official lessphp documentation1) to learn about the language itself. We're using lessphp as a parser so any restrictions of that library apply (eg. you can't use JavaScript expressions).

Style Guide

When using LESS please keep the following things in mind:

  • Use nesting sparsely. Nesting deeper that 3 or 4 levels usually isn't needed and does not improve readability and might even affect selector performance
  • Prefix your mixins and variables. When you define your own mixins and variables try to avoid common names that might clash with other templates or plugins. Just as you would with your classes and IDs.

Accessing style.ini placeholders

style.ini placeholders are available in your styles as LESS variables, prefixed with @ini_ and with the __ removed.

Eg. the __background__ placeholder becomes @ini_background in your LESS styles.

Version of lessphp

At the moment (current date: 2018-03-08) the newest version of lessphp is 0.4.0, which is included in DokuWiki 2017-02-19e “Frusterick Manners”. Please be aware the publication date of version 0.4.0 is August 09 2013! (Changelog) 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.

Online Compiler

On page there is an online compiler which supports a rapid testing what code snippet works and what doesn't. Here the full screen version.

How to realize an "IF-Statement"?

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; }


compiles to this CSS-code:

#main_body {
  background-color: red;
p {
  color: green;

Insert Unparsed Code

A trick to insert (nearly) every unparsed code in LESSPHP:
Github/dokuwiki/issues#2254 (comment)


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.

1) documentation is not the right manual for DokuWiki
devel/less.txt · Last modified: 2021-03-24 22:48 by Michaelsy