Rendre dynamique son CSS avec Less

Post Tags

A LIRE AUSSI

Par Scicasoft - Septembre, 20 2012

Un client vous demande de lui créer un site Web. Vous lui présentez le design et il vous dit de changer le style de quelques éléments. Pour ce faire vous êtes obligé de parcourir tous le contenu de tous les fichiers CSS pour modifier le style des éléments concernés. Vous faites la même chose à chaque fois que vous voulez changer de design .

Maintenant imaginez que vous ayez la possibilité d’utiliser des variables dans votre CSS ça vous permettrait de changer la couleur d’un ensemble d’éléments d’un seul coup. Et si en plus de ça vous pouvez faires des opérations (additionner des couleurs par exemple), écrire une fonction et faire des imbrications.

Eh bin tenez-vous bien … C’EST POSSIBLE :-D c’est ce que le framework CSS Less fait. Oui vous avez bien entendu, oups bien lu, à part le PHP, JavaScript, Java et autres langages il y’a aussi des frameworks CSS.

Less (Leaner CSS) est un outil ou framework développé par Alexis Sellier et qui permet de rendre votre CSS dynamique. Il est sous licence Apache 2.0 et il est à sa version 1.3.0 au moment où j’écris cet article.

Essayons de parcourir ensemble cet outil pour voir ce qu’il met à notre disposition. Si vous avez déjà fait du CSS vous n’aurez pas de problèmes parce qu’ils ont les mêmes syntaxes.

Pour l’utiliser il faut télécharger le fichier JavaScript less.js que vous incluez après avoir importé votre fichier less comme suit :

Attention !!! Il faut TOUJOURS mettre le script less.js APRÈS vos fichiers less, si vous l’incluez il interprète automatiquement les fichiers less donc si vous le mettez avant il ne les reconnaitra pas (il ne peut pas deviner ce que vous voulez mettre après mais ce serait cool par contre)

Les variables

Nous commençons notre voyage avec les variables. Elles permettent d’éviter les répétitions sur les valeurs des propriétés de style. Elles peuvent contenir du texte, couleur, un nombre de pixel, … et on peut aussi effectuer des opérations par-dessus.

Exemple :

Les imbrications

Les règles imbriquées nous permettent d’éviter la répétition l’inclusion des éléments en mettant seulement les balises à l’intérieure des balises parentes.

Exemple :

Les mixins

Ne vous inquiétez pas pour le nom ce ne sont que des fonctions ☺. Ils permettent de regrouper un ensemble de propriété dans une classe et de le réutiliser pour définir le style d’autres éléments. Nous pouvons aussi, comme toutes fonctions, mettre des arguments qui peuvent avoir des valeurs par défaut.

Exemple :

Bon je suis désolé mais je n’ai plus de carburant pour continuer le voyage mais si ça vous intéresse vous pouvez lire la documentation officielle qui est très détaillée.

Avant de vous laisser je vous donnes un cadeau : simpless qui est une application qui permet, non seulement de compiler vos codes Less en CSS mais aussi de les compresser, d’afficher les erreurs syntaxiques, de mettre à jour automatiquement le framework Less, …