Quel intégrateur n’a pas un jour rêvé d’avoir un CSS plus malléable, plus pratique, plus souple ? Un CSS qui n’oblige pas à changer 30 fois l’occurrence d’une couleur lorsque l’on veut changer son design ?
Une telle chose existe, et même sous plusieurs formes, les plus connues étant {LESS} et SASS. N’étant pas familier du deuxième, c’est ici à propos du premier que ma plume coulera (mon clavier ne pouvant pas couler. J’espère.)
{LESS} est un langage à part, dérivé du CSS, offrant de nombreuses possibilités supplémentaires (à tout hasard : des variables, par exemple), facilitant grandement la vie de l’intégrateur.
Pour raccourcir encore plus, c’est même une nouvelle syntaxe pour le CSS.
A contrario de SASS, la syntaxe d’un fichier {LESS} est très proche de celle d’un fichier CSS traditionnel, mais avec quelques ajouts supplémentaires.
LESS est parsé (via plusieurs moyens que j’explorerais plus tard dans cet article), si bien qu’un fichier .less ne contenant que du CSS se retrouvera inchangé.
Tout d’abord, qu’apporte cette nouvelle syntaxe ?
Alors, Allons-y !
Ce sont probablement une des meilleures caractéristiques de LESS.
Bon, techniquement, ce ne sont pas réellement des variables, puisque leur valeur ne peut pas changer en cours d’exécution. Ce sont donc des constantes, mais l’utilité n’en est pas moindre.
Imaginez que vous ayez une couleur que vous utilisez pour les titres, certains fonds, et de multiples bordures. Si vous voulez changer les couleurs de votre site, il vous faudrait rechercher chaque occurrence de la dite couleur et les changer une à une.
LESS permet de faire ça :
@main_color: #F6BD4F; body { color: @main_color; } #header h2, #header h3 { color: @main_color; } #content { border: 2px dashed @main_color; }
Ce qui, une fois parsé nous donne un fichier CSS contenant :
body { color: #F6BD4F; } #header h2, #header h3 { color: #F6BD4F; } #content { border: 2px dashed #F6BD4F; }
L’utilité n’apparaît peut-être pas immédiatement sur un petit bout de code comme celui-ci, mais sur des grosses feuilles de styles, c’est une bénédiction.
Qui n’a jamais rêvé de faire ça :
(attention… Action !)
#content { background: skyblue; .article { color: red; li { list-style-type: none; } a { color: black; } } }
Non vous n’en avez jamais rêvé ? C’est pourtant bien pratique et possible en LESS, nous renvoyant le code CSS suivant :
#content { background: skyblue; } #content .article { color: red; } #content .article li { list-style-type: none; } #content .article a { color: black; }
C’est quand même bien plus logique de le faire selon la première méthode, non ?
Là encore ce ne sont pas réellement des fonctions, plus des petits bouts de codes qui peuvent prendre des variables en paramètres.
Un exemple parlant mieux que des mots, voici une fonction LESS que j’utilise régulièrement :
.h-nav(@float: right, @paddingTB: 10px, @paddingRL: 5px) { ul { float: @float; li { float: left; list-style: none; display: inline; padding: @paddingRL @paddingTB; } } }
Nous avons là un petit mix de tout ce qu’on a déjà vu, et une fonction très utile qui nous crée un menu de navigation horizontal en une ligne :
#header { .h-nav(left, 10px, 20px) }
Et nous voici avec un menu horizontal à gauche, dont les éléments ont un padding: 10px 20px;
Pratique, n’est-ce pas ?
Les fonctions peuvent ne prendre aucun argument et les arguments non spécifiés lors de l’appel de la fonction prennent la valeur par défaut qui leur a été attribuée (par exemple ici float: right; padding: 10px 5px;. Si aucune n’a été attribuée, il en résulte une erreur de compilation.
LESS permet aussi de faire des opérations. Bien qu’un peu superflu, cela peut se révéler très utile.
Toutes les opérations basiques sont autorisées, par exemple :
padding: 5px + 3
Mais prenons un exemple plus utile :
@default-size: 14px; .font-resize (@add-size: 1.2em) { font-size: @default-size * @add-size; }
Voici une fonction qui changera la taille de la police en fonction de la taille par défaut, très utile aussi lorsque le navigateur agrandi la taille de la police lors d’un zoom (ie…).
Cela marche aussi avec les couleurs :
color: #111 * 2
Ce qui permettra d’éclaircir ou de foncer la couleur en fonction de l’opération.
Les fichiers .less sont compilés via un parseur Ruby ou Javascript qui transforme le code en CSS.
Il existe 3 méthodes pour se faire.
Fini. Le (ou les) fichier .less dont l’adresse a été spécifié via le tag < link > seront compilés à chaque chargement de page.
Rapide, facile à mettre en place, peu contraignant.
Javascript désactivé = pas de css, temps de chargement de page plus long (Ce n’est pas réellement plus lent, mais sur de gros sites ça doit faire une différence).
Deux possibilités. Via une interface telle que Less app sous mac ou bien via ligne de commande :
lessc -x fichier.less fichier.cssSi le fichier.css n’existe pas il sera créé. Si il existe il sera effacé.
L’option -x permet de minifier le code.
Pas de ralentissements lors du chargement de page.
Il faut le faire à chaque modification du fichier.less, c’est fastidieux.
Il existe un compilateur lessphp, mais il n’est plus à jour et ne respecte pas la syntaxe basique de LESS.
Sous wordpress il existe une extension WP-LESS qui l’utilise, mais je n’ai même pas réussi à la faire fonctionner.
Voici ma méthode, celle que j’ai choisi pour ce blog :
< ?php function parseLess( $source, $destination ) { $command = 'lessc -x '. $source .' '. $destination; $stdout = shell_exec($command); if ($stdout) { echo 'Less convertion error: '.$stdout; } } ?>
Assez facile à mettre en place, et surtout peu contraignant.
Augmente le temps de chargement (je n’ai pas vu de différence par rapport à la version javascript toutefois)
A noter que pour un blog wordpress, le chemin d’accès aux sources ne sera pas ./less/fichier.less car l’index est celui situé directement dans le dossier wordpress.
Il faut donc faire ./wp-content/theme/my_theme/less/fichier.less. Il en va de même pour la destination.
Pour clôturer cet article, rien de mieux que quelques exemples :
- Fonction qui permet de faire un border-radius (css3) pour tout les navigateurs en une ligne.
- Fonction qui permet de mettre une box-shadow (css3) pour tout les navigateurs en une ligne.
Pareil pour les propriétés transform (css3).
- Un fichier d’initialisation qui définie toutes les variables basiques (police par défaut, taille par défaut, couleur des liens, police des titres…) que l’on appelle dans les autres fichiers .less via un @import (pas de problème de « lenteur » par rapport à un tag link puisque less est compilé en un seul fichier avant).
Tout ce blog est codé en {LESS}. De façon générale pour tout mes projets, j’ai un mini-framework {LESS} avec un fichier d’initialisation, un reset, un fichier de typographie, et surtout : un fichier include.less, rempli de fonctions et de variables utiles.
[Sources et ressources]
Site officiel
Centage LESS Framework