Wiki source code of Migrate from LESS variables to CSS properties
Last modified by Lucas Charpentier on 2026/04/20 18:09
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | In order to access the latest CSS features and improve the performance on first style load of your instance, it could be worth migrating your LESS stylesheets to use native CSS. | ||
| 2 | |||
| 3 | * Change the name of your file or the type of the SSX | ||
| 4 | * Change the name of the resource you're using in your template according to what you did in the previous step. | ||
| 5 | * For every LESS variable declaration ##@example: #cecece;## | ||
| 6 | ** If your variable is supposed to be accessed globally, add its equivalent in a ##:root{ ~-~-example: #cecece;}## block | ||
| 7 | ** If your variable is supposed to only be used in style you control, add it in the appropriate stylerule. The more specific and the least there's a chance of collision. | ||
| 8 | * For every LESS variable used like ##color: @example;## | ||
| 9 | ** If your LESS variable is specific to xwiki, it's already mapped, you can just use the equivalent CSS syntax ##color: var(~-~-example);##. | ||
| 10 | ** If your LESS variable comes from bootstrap, then you either want to declare it (see above) and then use the equivalent CSS syntax ##color: var(~-~-example);##. | ||
| 11 | ** {{warning}}In some specific situations, a CSS variable cannot replace a LESS variable without important refactoring. You can consider using a hard-coded value in those situations.{{/warning}} | ||
| 12 | * For every operation made in your LESS ##@popover-arrow-width + 1px##, make sure to include it in a ##calc## block ##calc(var(~-~-popover-arrow-width) + 1px);##. | ||
| 13 | ** ((( | ||
| 14 | LESS doesn't have any clearly defined unit system. CSS has a very strict unit system right now. If a formula doesn't work in CSS, it's probably because the units do not respect the constraint of the operators ([[The exact rules>>url:https://developer.mozilla.org/en-US/docs/Web/CSS/calc#description]]): | ||
| 15 | |||
| 16 | * ((( | ||
| 17 | Addition and substraction, both values must have the same unit | ||
| 18 | ))) | ||
| 19 | * Multiplications and divisions, only one value has an unit, the second one is unitless. | ||
| 20 | ))) | ||
| 21 | * For every one-line comment that does not follow [[XS codestyle rules>>url:https://dev.xwiki.org/xwiki/bin/view/Community/CodeStyle/XhtmlCssCodeStyle/#HComments]] ##~/~/ This is a possible comment syntax in LESSCSS## must be made compatible with the CSS syntax ##/* Now compatible with CSS. */## | ||
| 22 | * For every LESS color function, use instead the CSS ##hsl##, ##color## and ##color-mix## functions. | ||
| 23 | ** ##hsl## is useful for most operations, ##color## is really only useful for transparency calculations. | ||
| 24 | ** LESS color functions work directly with additions: ##darken(@well-bg, 7%)## is the same as ##hsl(from var(~-~-well-bg) h s calc(l - 0.07))##. |
