Code couleur simplifié en CSS ou javascript

bonjour les rois de la soluce qui tue !

L'intitulé de ma question n’est pas clair, je précise :
j’ai un css qui grossit en même temps que mon site dans lequel j’appelle souvent une palette de couleur
j’ai créé des "class" (texte rouge, texte rouge foncé, fond rouge, fond rouge foncé, texte bleu...)
je les rajoute de-ci de-là dans mon html, jusqu’ici tout va bien.
Mais ces couleurs (j’en ai 16) apparaissent aussi dans d’autres "class" pour des animations ou des trucs spécifiques.
Comme je n’arrête pas d’ajuster la palette, soit pour améliorer le contraste soit pour changer franchement de couleur, je me vois en permanence ne faire que des chercher/remplacer (avec des remplacements intermédiaires quand je dois remplacer une couleur par une autre).

Ma question est donc :
est-ce qu’on peut mettre quelque part l’équivalent de "bleu=#123456, vertFoncé=#654321" ?
et pouvoir mettre dans le css un truc du genre "color="bleu", background-color="vertFoncé"
pour n’avoir à changer les couleurs qu’à un seul endroit.

J'espère avoir été clair, beaucoup de texte pour pas grand chose !

Merci d’avance...

je précise que je n’ai jamais mis un script dans une page, faut me dire où le mettre si la solution est en javascript
Modifié par Gropilou (07 Mar 2016 - 14:47)

Bonjour Gropilou,

Personnellement, étant dans un cas de figure similaire, j'utilise Php pour générer mon Css ce qui me permet l'utilisation de variables.
Le principe est de placer le css généré en tampon et d'appliquer une fonction de remplacement sur les variables.

Je sais l'idée, déplaît beaucoup ! Cela a ses avantages et ses inconvénients.

Merci, mais j’aimerai éviter le php pour l’instant, j’apprend déjà tous les jours de nouveaux mots en html et css. Je suis déjà limite saturation.

Salut,

Tu as le choix, soit tu utilises LESS soit SASS

Petit exemple de code Sass avec la syntaxe Scss

// note : ceci est bien un commentaire valide avec sass. Au revoir les /**/

$blue: #3bbfce; // Variable
.content-navigation {
  border-color: $blue;

  // mixin
  color: darken($blue, 9%);

  // Imbrication
  li {
    font: {
      family: serif;
      weight: bold;
      size: 1.2em;
    }
  }
}

$margin: 16px;
.border {
  // operateurs
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
} 

Modifié par JENCAL (07 Mar 2016 - 15:07)

Me voilà parti a regarder de la doc sur LESS et SASS...
Ça a l'air génial ce truc-là ! (Je lis des articles sur LESS)
Ça semble résoudre tout un tas de truc sur lequel je bute.

Merci bien

De rien,

C'est un peu plus chiant/complexe à mettre en place mais bon.. une fois que c'est configurer c'est bien mieux

JENCAL a écrit :
Tu as le choix, soit tu utilises LESS soit SASS

Ou encore Stylus.

Prenez bien le temps de choisir votre préprocesseur avant de vous lancer là dedans. Après rien ne vous empêchera d'en utiliser plusieurs une fois l'un d'entre eux maîtrisé.

Perso j'utilise Stylus désormais, car je suis fan de l'esprit Dry (voici un exemple de code, et un exemple plus développé ici), après avoir beaucoup usé de Sass. J'ai fais aussi un peu de Less (mais pas fan de ce dernier).
Modifié par Olivier C (07 Mar 2016 - 15:41)

Bonjour Gropilou,

Attention SASS et LESS sont des préprocesseur CSS (il faut compiler le code pour obtenir le bon vieux CSS) du coup il te faudra un bel outil tel que GULP pour compiler tout ça avant de mettre en ligne (c'est en ce sens que c'est plus lourd a installer/manipuler). Par contre c'est effectivement fabuleux.

je te conseille la lecture de Le guide ultime pour accélérer son développement frontend (notamment le point 4 mais ça fait pas de mal de tout relire) et pour aller plus loin dans gulp : Introduction à Gulp

En bonus, pour finir de ta convaincre, tes problèmes du genre : http://forum.alsacreations.com/topic-1-78262-1-Editeurpourmac-chercherremplacerdanstouteslespages.html seront résolu vu que la techno permet de faire des "template" -> équivalent alors du include php (1 seul header par exemple inclu dans toutes les pages) mais une fois compilé -> 100% HTML/CSS (pas de calculs à la volée en php ou js)

Pas évidement a prendre en main, mais c'est la vie Fonce !

Olivier C a écrit :

Ou encore Stylus.

Prenez bien le temps de choisir votre préprocesseur avant de vous lancer là dedans. Après rien ne vous empêchera d'en utiliser plusieurs une fois l'un d'entre eux maîtrisé.

Perso j'utilise Stylus désormais (voici un exemple de code, et un exemple plus développé ici), après avoir beaucoup usé de Sass. J'ai fais aussi un peu de Less (mais pas fan de ce dernier.

Pourquoi être passer de SASS à Stylus ? j'hésite à apprendre Stylus...

JENCAL a écrit :
Pourquoi être passer de SASS à Stylus ? j'hésite à apprendre Stylus...

Ouah ! Rapide les réponses ! J'avais même pas fini de rééditer mon post précédent...

Donc, pourquoi Stylus ?
Pour deux raisons :
1/ la plus importante pour moi : l'esprit sans répétition du code (Dry), hyper condensé. Mes fichiers comportent presque deux fois moins de lignes, plus d'accolades, de doubles points ni de points virgules (qu'est-ce que je perdais du temps avec ça !). Les fichiers deviennent hyper clair à la lecture (voir ici),
2/ Stylus est compilable nativement en Node.js et j'utilise cet environnement pour développer sous Gulp, donc exit Ruby. Cet aspect est moins important pour moi, mais c'est toujours un truc de moins qui tourne en tâche de fond.

J'ai véritablement découvert Stylus avec CodePen (comme la plupart des autres syntaxes alternatives pour CSS ou Html que je connais). On s'y met très vite, une journée en ce qui me concerne, un peu plus pour les variables en lien avec la fonction calc().
Modifié par Olivier C (07 Mar 2016 - 15:52)

Olivier C a écrit :

Ouah ! Rapide les réponses ! J'avais même pas fini de rééditer mon post précédent...

Haha, en faite quand j'ai "cité" cela m'a pris ton ancien message pas encore edité. Quand j'ai publier ma question, cela à fait la mise à jour tous seul. au même moment.. ^^

Olivier C a écrit :

Donc, pourquoi Stylus ?
Pour deux raisons :
1/ la plus importante pour moi : l'esprit sans répétition du code (Dry), hyper condensé. Mes fichiers comportent presque deux fois moins de lignes, plus d'accolades, de doubles points ni de points virgules (qu'est-ce que je perdais du temps avec ça !). Les fichiers deviennent hyper clair à la lecture (voir ici),

Il me semblait qu'avec SASS (j'utilise LESS et Gulp) on pouvait évité les accolades et ";" j'hésite entre stylus et sass du coup.

Olivier C a écrit :

2/ Stylus est compilable nativement en Node.js et j'utilise cet environnement pour développer sous Gulp, donc exit Ruby. Cet aspect est moins important pour moi, mais c'est toujours un truc de moins qui tourne en tâche de fond.
J'ai véritablement découvert Stylus avec CodePen (comme la plupart des autres syntaxes alternatives pour CSS ou Html que je connais). On s'y met très vite, une journée en ce qui me concerne, un peu plus pour les variables en lien avec la fonction calc().

Ok, bon j'utilise pas Node.js... mais je vais essayé les deux préproc css et on verra bien

JENCAL a écrit :
Il me semblait qu'avec SASS (j'utilise LESS et Gulp) on pouvait évité les accolades et ";" j'hésite entre stylus et sass du coup.

Tout à fait. C'est la syntaxe des fichiers .scss qui reste encore assez proche de Css. La syntaxe Sass est Dry elle aussi, bien qu'un chouilla moins que celle de Stylus : il reste encore les deux petits points (mais je chipotte... ).

Sass est plus répandu, il est globalement mieux supporté par les éditeurs que Stylus qui auront besoins de plugins pour ce dernier. L'aide en ligne sera plus facile à trouver (en même temps on n'en a pas vraiment besoin).

Ma vrai motivation est que j'aime bien utiliser tout un tas de technos. De plus Stylus se rapproche de Jade que j'utilise pour le html.

Je vois que ça discute pendant que j'ai le dos tourné et que je me documente.
Discussion intéressante !!

Au vu de tout ceci, la réponse à ma question d’origine semble être (en LESS) :

@bleuClair: #123456;
@rougeFonce: #654321;
#header {
color: @ bleuClair;
}
h1 {
color: @ rougeFonce;
}

et en plus, on pourrais le faire sans tout ce merdier d’accolade !

Si j’ai bien compris LESS semble être compilé "soit" en javascript par le navigateur, soit en PHP par le serveur. Je vais déjà me créer un environnement php avec Mamp (je voulais éviter, mais bon il serait temps que je m’y mette), me renseigner sur les installations javascript (je voulais éviter, mais bon il serait temps que je m’y mette) nécessaires de LESS, l’idée d’avoir du conditionnel et des variables ou des fonctions en CSS m’excite un peu !

Merci et à plus tard pour de prochaines aventures !

Que pensez-vous de "prepos" ?
Modifié par Gropilou (07 Mar 2016 - 19:17)

Tu peux faire des listes de couleurs et des boucles pour générer des classes avec sass (les autres aussi sûrement).

Prepros permet de compiler tout un tas de choses comme less et sass sans avoir à mettre les mains dans le cambouis. Donc c'est bien si tu veux te lancer sans te compliquer la vie.
Modifié par bzh (07 Mar 2016 - 20:51)

Un truc au passage :

@bleuClair: #123456;
@rougeFonce: #654321;
#header {
  color: @ bleuClair;
}
h1 {
  color: @ rougeFonce;
}

En principe on évite de donner à la variable le nom d'une couleur. En effet, que se passe-t-il si "@bleuClair" devient finalement un bleu foncé ? Ou même un rouge ? Bref, le nom des variables de couleurs doit être plus neutre. Par exemple, pour Less : @color001 ; pour Sass : $color001.

Et attention, le code ci-dessus comporte un bug : il y a des espaces entre les arobases et le nom de la couleur pour certaines des variables. Le code ne risque pas de fonctionner en l'état.

Gropilou a écrit :
Si j’ai bien compris LESS semble être compilé "soit" en javascript par le navigateur, soit en PHP par le serveur.

LESS peut être compilé en javascript soit côté client (pas bien !) soit au moment de la production du code avec un task runner tel que Grunt ou Gulp (très bien !). Prepros fait aussi le boulot mais c'est payant (jamais essayé)...

Bonjour,
Etant en phase recherche de documentation / formation pour le développement de mon générateur HTML, j'ai forcément été interpellé par les préprocesseurs cités supra, ainsi que les outils d'intégration permettant de les lancer / exécuter.
Et c'est là, à mon avis, que le bât blesse...
Autant je ne conteste pas l'utilité qu'il peut y avoir à utiliser des variables et faire des boucles, autant la mise bout à bout de plusieurs outils ne simplifie pas les choses.
Ceci requiert en effet une courbe de formation et l'ensemble peut être fragile sur le long terme.
Ce phénomène est bien connu dans les environnements de développement tels que Java ou autres.
La "lisibilité améliorée" des fichiers, également mise en avant, ne ma paraît pas une évidence lorsque je jette un oeil aux exemples fournis.
Bien évidemment, un développeur ayant quelques heures de vol saura lire ces fichiers sans trop de soucis. Pour un débutant ex nihilo, acquérir une bonne connaissance HTML /CSS et la maîtrise de ces outils simultanément risque de s'avérer fastidieuse.
On peut toujours arguer du fait que cela reste un bon investissement sur le long terme, mais l'ensemble n'en reste pas moins complexe vu le périmètre à appréhender.
Même en se limitant à un seul préprocesseur et un seul outil d'intégration, après un choix qui peut s'avérer incertain, le chemin à parcourir est encore long...
L'apprentissage de PHP en sus est la cerise sur le gâteau

Même si ce n'est pas du code, le Css se comporte de la même manière dans son apprentissage :

Pour un codeur, le plus difficile est d'apprendre son premier langage, la courbe d'apprentissage des autres langage est ensuite plus facile : l'apprenti reconnaitra facilement les boucles for, each, les conditions, etc... Le reste est souvent question de syntaxe. Ensuite seulement viendra le problème de la maîtrise de performance système (gestion du cache, etc).

On peut définir le même parallèle pour l'intégrateur essentiellement tourné vers Html/Css (je met ici de côté la complexité spécifique aux langages de code : procédural ou orienté objet). Une fois Css maîtrisé - ET PAS AVANT** - l'intégrateur peut se tourner vers des solutions qui lui faciliterons la vie. Avec de nouvelles courbes d'apprentissage, mais plus rapides ici. En effet, la différence entre le Vanilla CSS et les langage prépros est souvent une affaire de points virgules et d'accolades en moins. Temps d'assimilation de ce point : une heure. Ce qui prend un peu plus de temps est l'assimilation de fonctions apparentées à celle des langages de code : on va donc retrouver les variables, les boucles for, les conditions, etc... Si l'on a déjà fait un peu de javascript ou de php se sera facile, il faut juste comprendre les différences - subtiles parfois - de la syntaxe et des possibilités du langage (par exemple : les variables Sass et Less n'ont pas la même portée).

Bref, à la sortie, en un jour, deux au plus si vraiment on entre dans le détail (ce que l'on est pas obligé de faire dans un premier temps), l'affaire est pliée.

** Combien de fois a-t-on vu un code de sortie dégeulace en raison de la méconnaissance de l'outil par le dev, mais aussi en raison de la méconnaissance de Css...
Modifié par Olivier C (08 Mar 2016 - 08:48)

Bonjour,

Quand on travaille essentiellement sur un site, on peut assez facilement se passer de preprocesseurs css en regroupant tous les sélecteurs ayant une propriété avec le même attribut. Effectuer judicieusement ces regroupement me semble nécessité moins d'effort que de réécrire tout son css en less ou autre. Et on sera à peine moins rapide en maintenance ensuite, sans avoir à gérer la couche logicielle supplémentaire que constitue l'utilisation d'un préprocesseur.

Évidemment, si on fait du code au km, l'analyse sera différente.

L'apprentissage du php me semble dans tous les cas bien plus important.

Amicalement,

—>Parsimonhi

Atari !

j’étais justement en train de regrouper les classes qui appellent les couleurs, reportant l’installation de l’usine à gaz à plus tard.

Quant au php, il faut effectivement que je m’y mette, le prochain site que je projette de faire doit être dynamique (catalogue en ligne pour un copain éditeur, il a 210 livres, je vais pas faire 210 pages !)

Je vais m’installer Mamp (je suis sur mac)

Bonne journée