Je trouve ca lourd (surtout aujourd'hui) de devoir parcourir un (voir plusieurs) fichier(s) CSS pour modifier la couleur d'un élément; voir parfois de dizaines car vous trouvez que je vert ne convient pas aussi bien qu'un bleu pour TOUT les éléments de votre page... et donc vous devez rechercher dans vos CSS toutes les #15FF12; mais aussi les #18FC11; et puis vous trouvez a la fin un #182500; qui vous pourris bien la vie...
heureusement il y a LessCSS...
Le tutorial est fait pour la version 1.3.3, mais le code ci-dessous est facilement adaptable à d'autre versions.
De plus LessCSS *peut* vous aider a faire du responsive design (1)...
En deux mot: un préprocesseur CSS. LessCSS est au CSS ce que le PHP est à l'HTML...
Qui n'a jamais rêvé de définir une fois pour toute SA couleur de base, et ensuite de faire des déclinaisons matématique en CSS...
et bien LessCSS est là pour ça (entre autre)...
Vous allez me dire oui, mais mon code est déjà bien avancé et je ne veux pas tout modifier, ben c'est pas très compliqué à utiliser... Même sur des applications bien avancées en développement.
Vous avez deux techniques; le précompilé ou l'interprété à la volée...
Pour le développement je vous conseille le second, pour la production le compilé c'est bien aussi.
Oui, vous écrivez vos LessCSS, puis via une appli Windows/linux voir même en ligne, vous compilé vos code Less en CSS, et vous n'avez plus qu'a modifier la référence CSS (ou a remplacer votre CSS de base par le résultat compilé) et hop le tour est joué.
en ligne voici quelques outils:
http://www.dopefly.com/less-converter/less-converter.html
C'est la solution que j'utilise aujourd'hui
Dans mon framework personnel (Version 1), j'ai un fichier "header.php" qui contient le début du code d'une page classique (en gros les balises <HTML> <HEAD>, </HEAD> et <BODY>).
voici un extrait de mon <head>:
Je reviendrais sur le chargement des javascript plus tards, ce qui m'interesse se situe dans la partie CSS. j'ai beaucoup de CSS, car mon Framework a évolué avec le temps, de façon anarchique.
Ce fichier php initalise aussi quelques paramêtres vitaux, et contient l'inclusion des CSS natifs de tout le projet (oui TOUT les CSS, donc parfois un joyeux bordel).
J'ai donc adapté ce php pour utiliser LessCSS;
Puis dans la section <HEAD> </HEAD> elle charge le CSS demandé:
Et enfin le script less:
voici les sources .less de cet exemple
pour résumé, nous avons deux fichiers inclus (via la commande @import) qui contienent toutes les définitions de base de notre css (common.less et menu.css); puis un fichier main.less qui contient les définitions de la page (sur base du fichier common.less), il est intéressant de noté que les fichiers .css (et qui ne contiennent pas de définition LessCSS, sont importés tel quel dans le fichier final; en version javascript les commentaires sont "oubliés" mais en version compilée, les commentaires CSS sont conservés.
Et le résultat dans votre page
Vous pouvez voir qu'il y a des optimisations (margin: par exemple) mais surtout que les couleurs sont calculées a partir de la couleur de base "@nice-blue". Si vous référencez une variables qui n'existe pas (plus) vous aurez un message d'erreur:
Simple non ?
(1) Je dis *peut* car je n'ai pas testé le truc à l'heure où j'écris ces lignes... (Il faut impérativement utiliser la version javascript de LessCSS pour que cela fonctionne...)