Table des matières
Support de LESS CSS dans DokuWiki
Disponible à partir de la version 2013-12-08 “Binky”.
LESS est un langage dynamique de feuilles de styles, qui compile le résultat en CSS. Il offre des nouvelles possibilités comme les variables, l'imbrication, les modèles, les opérateurs et les fonctions lors de la rédaction des feuilles de style.
DokuWiki inclut les fonctions de LESS en PHP, ce qui signifie que vous pouvez profiter de tous les avantages de ce prétraitement en CSS dans vos thèmes et vos greffons. Bien entendu, cela reste optionnel et vous pouvez aussi écrire du «simple» CSS.
Les fichiers en .css
et .less
sont automatiquement traités par LESS.
Langage LESS
Merci de consulter la documentation de lesserphp1) pour apprendre le langage lui-même. Comme DokuWiki utilise lesserphp, certaines restrictions existent (par exemple: vous ne pouvez pas utiliser d'expressions en JavaScript).
Conseils
Lorsque vous utilisez LESS, vous devez être conscient des points suivants:
- Utilisez l'imbrication (nesting) avec parcimonie. L'imbrication de plus de 3 ou 4 niveaux n'est habituellement pas nécessaire, elle n'améliore pas la lisibilité et peut être défavorable en terme de performances de votre navigateur.
- Utilisez un préfixe pour vos modèles (mixins) et variables. Lorsque vous définissez vos propres modèles et variables, essayez d'éviter les noms trop communs qui peuvent entrer en conflit avec d'autres thèmes ou plugins. Procédez de la même manière que pour les classes et id.
Accès aux constantes de style.ini
Les constantes définies dans style.ini sont disponibles en tant que variables LESS. Elles sont préfixées ainsi: @ini_
. Les __
sont supprimés.
Par exemple, la constante __background__
devient la variable @ini_background
dans les styles LESS.
Mise en garde
Parce que toutes les feilles de style CSS passent (aussi) par LESS, nous sommes un peu plus stricts quant à la validité du code CSS. Si votre plugin utilise un code CSS invalide, une erreur sera retournée. Un liste des problèmes connus existe ici: LESS CSS Errors (an anglais).