Comment puis-je définir des couleurs en tant que variables dans les CSS ?

Question

Je travaille sur un fichier CSS qui est assez long. Je sais que le client pourrait demander des modifications du schéma de couleurs, et je me demandais : est-il possible d'attribuer des couleurs à des variables, de sorte qu'il me suffise de modifier une variable pour que la nouvelle couleur soit appliquée à tous les éléments qui l'utilisent ?

Veuillez noter que je ne peux pas utiliser PHP pour modifier dynamiquement le fichier CSS.

Answer 1

CSS prend en charge cette fonction de manière native avec Variables CSS .

Exemple de fichier CSS

:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

Pour un exemple concret, veuillez consulter ce JSFiddle (l'exemple montre que la couleur de l'un des sélecteurs CSS est codée en dur sur le bleu, tandis que l'autre sélecteur CSS utilise des variables CSS, tant dans la syntaxe originale que dans la syntaxe actuelle, pour définir la couleur sur le bleu).

Manipulation d'une variable CSS en JavaScript/côté client

document.body.style.setProperty('--main-color',"#6c0")

Le support est assuré dans tous les navigateurs modernes

Firefox 31+. , Chrome 49 , Safari 9.1 et plus , Microsoft Edge 15+ (en anglais) et Opéra 36+. sont dotés d'une prise en charge native des variables CSS.

Answer 2

Les gens n'arrêtent pas d'upvoter ma réponse, mais c'est une solution terrible comparée à la joie de sass ou moins d'autant plus qu'il existe un grand nombre d'outils faciles à utiliser. gui pour les deux ces jours-ci. Si vous avez un peu de bon sens, ignorez tout ce que je suggère ci-dessous.

Vous pourriez mettre un commentaire dans le css avant chaque couleur afin de servir de variable, dont vous pouvez changer la valeur en utilisant la recherche/remplacement, donc...

En haut du fichier css

/********************* Colour reference chart****************
*************************** comment ********* colour ******** 

box background colour       bbg              #567890
box border colour           bb               #abcdef
box text colour             bt               #123456

*/

Plus loin dans le fichier CSS

.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}

Ensuite, pour, par exemple, modifier la couleur du texte de la boîte, vous effectuez une recherche/remplacement sur le lien suivant

/*bt*/#123456

Answer 3

Le CSS lui-même n'utilise pas de variables. Cependant, vous pouvez utiliser un autre langage comme SASS pour définir votre style à l'aide de variables et produire automatiquement des fichiers CSS, que vous pouvez ensuite mettre sur le Web. Notez que vous devrez relancer le générateur à chaque fois que vous modifierez votre CSS, mais ce n'est pas si difficile.

Answer 4

Vous pouvez essayer Variables CSS3 :

body {
  --fontColor: red;
  color: var(--fontColor);
}

Answer 5

Il n'y a pas de solution facile et unique en CSS. Vous pourriez le faire :

• Trouver toutes les instances de background-color et color dans votre fichier CSS et créez un nom de classe pour chaque couleur unique.

  .top-header { color: #fff; }
  .content-text { color: #f00; }
  .bg-leftnav { background-color: #fff; }
  .bg-column { background-color: #f00; }

• Passez ensuite en revue toutes les pages de votre site où la couleur est impliquée et ajoutez les classes appropriées pour la couleur et la couleur de fond.

• Enfin, supprimez toutes les références de couleurs dans votre CSS autres que les classes de couleurs que vous venez de créer.