Faire des feuilles de style dynamique avec le format LESS CSS
Voici le type d'avancée que j'attendais depuis un moment.
En effet, lorsqu'on créé un site, nous avons régulièrement des déclarations récurrentes dans nos feuilles de style.
Le problème est que, lorsque vous avez un changement à faire dans une de ces feuilles de style, vous vous retrouvez à faire des copier coller qui peuvent vous prendre beaucoup de temps.
La technique que je vais vous présenter me semblait indispensable surtout depuis que je développe sous Android.
En effet, pour ce type de développement, vous avez un fichier qui regroupe différentes déclarations que vous pouvez récupérer dans vos layouts.
Cette avancée à un nom : c'est LESS CSS.
LESS, le langage de feuille de style dynamique
LESS étend le langage CSS connu de tous et permet de passer des variables, des fonctions que vous récupérez le long de votre feuille de style.
Exemple d'utilisation de LESS
Je ne vais pas vous reprendre tout le code du site officiel.
Voici une déclaration pour vous montrer comment cela fonctionne.
On va prendre l'exemple d'une couleur de police :
Dans une déclaration CSS normale, on aurait ce type de code :
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
Dans le cas présent @color remplace la couleur définit dans la déclaration CSS normale.
Nous avons dans cet exemple que deux déclarations, mais imaginez le faire sur 200 déclarations ?
Votre client vous dit, j'aimerais que cette couleur de police soit changé sur l'ensemble du site.
Vous ne modifiez qu'une seule ligne et non 200.
Derniers commentaires