Wiki source code of Use LESS Variables
Last modified by Eleni Cojocariu on 2026/02/05 17:21
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | == 1. Find the property you want to use. == | ||
| 2 | |||
| 3 | XWiki Standard has its LESS variables declared in a few files, mostly: | ||
| 4 | |||
| 5 | * ##variables.less## from the bootstrap module: pretty much everything to make the Bootstrap 3 design system work. | ||
| 6 | * ##variables.less## from the flamingo module: XWiki's special variables and overrides for default values | ||
| 7 | * ##variablesInit.vm## from the flamingo module: | ||
| 8 | * ##$xsVariablesValues## in ##variablelist.vm## | ||
| 9 | * [[The flamingo Color Themes>>doc:extensions:Extension.Flamingo Theme Application||anchor="HHowtocreateanewtheme"]], those variables can be viewed and edited directly in the Administrator UI but they do not cover everything in the skin. | ||
| 10 | |||
| 11 | {{info}} | ||
| 12 | LESS variables can also be declared in any of your custom LESS stylesheets. If you can't find it in the xwiki-platform codebase, it's probably from a customization :) | ||
| 13 | {{/info}} | ||
| 14 | |||
| 15 | == 2. Use this syntax in a LESS stylesheet == | ||
| 16 | |||
| 17 | {{code language="less"}} | ||
| 18 | .box.box-custom { | ||
| 19 | color: @brand-color; | ||
| 20 | } | ||
| 21 | {{/code}} |
