Comment définir des couleurs comme variables en CSS?


215

Je travaille sur un fichier CSS qui est assez long. Je sais que le client pourrait demander des modifications au jeu de couleurs et je me demandais: est-il possible d'attribuer des couleurs à des variables, de sorte que je puisse simplement changer 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.




Réponses:


224

CSS prend en charge cela nativement avec les variables CSS .

Exemple de fichier CSS

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

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

Pour un exemple de travail, veuillez consulter ce JSFiddle (l'exemple montre que l'un des sélecteurs CSS du violon a la couleur codée en bleu, l'autre sélecteur CSS utilise des variables CSS, à la fois la syntaxe originale et actuelle, pour définir la couleur sur bleu) .

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

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

Le support est dans tous les navigateurs modernes

Firefox 31+ , Chrome 49+ , Safari 9.1+ , Microsoft Edge 15+ et Opera 36+ sont livrés avec une prise en charge native des variables CSS.


3
Juste au cas où quelqu'un d'autre lirait ceci et essaierait de le faire fonctionner dans Safari - la prise en charge de CSS semble avoir été supprimée de Webkit au printemps / été 2013. bugs.webkit.org/show_bug.cgi?id=114119 lists.webkit.org /pipermail/webkit-dev/2013-April/024476.html Fonctionne toujours dans Chrome après avoir activé l'indicateur mentionné ci-dessus.
Marie Fischer

Testé sur chrome 36, ne fonctionne pas même avec le drapeau activé.
Fonctionne

Je viens de le vérifier avec Chrome Version 49.0.2623.110 m et cela ne fonctionne toujours pas.
radu

Quel est votre OS? Cela a fonctionné pour moi: Version 49.0.2623.110 (64 bits) sur Mac OS X
Arthur Weborg

A également travaillé sur la version Chrome de mon Android Android 5.1.0 Chrome 49.0.2623.105
Arthur Weborg

66

Les gens continuent de voter pour ma réponse, mais c'est une solution terrible par rapport à la joie de sass ou moins , en particulier compte tenu du nombre de gui faciles à utiliser pour ces deux jours. Si vous avez un sens, ignorez tout ce que je suggère ci-dessous.

Vous pouvez mettre un commentaire dans le CSS avant chaque couleur afin de servir de sorte de variable, dont vous pouvez changer la valeur en utilisant find / replace, alors ...

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, changer le jeu de couleurs pour le texte de la boîte sur lequel vous effectuez une recherche / remplacement

/*bt*/#123456

3
L'ajout de commentaires ne fonctionnera pas dans certains cas, comme lors de l'utilisation de filtres IE. Je ne peux pas mettre de commentaires ici -> filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3f5619', endColorstr = '# 77842f', GradientType = 0); / * IE6-9 * /
Carter Medlin

1
Voté parce que vous avez raison, c'est une terrible solution.
AndroidDev

Personnellement, j'ai préféré votre style de réponse côté client aux solutions côté serveur, j'ai donc fait quelque chose pour le faire. Ce n'est pas étonnant, mais cela fonctionne stackoverflow.com/a/44936706/4808079
Seph Reed

1
Votre réponse n'est pas acceptée. Vous pouvez toujours le supprimer si vous pensez que c'est terrible.
TylerH

38

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 en ligne. Notez que vous devrez réexécuter le générateur chaque fois que vous apportez une modification à votre CSS, mais ce n'est pas si difficile.


12
Je pense que la réponse est MAINTENANT (2016) incorrecte, n'est-ce pas? Bien que je pense qu'il serait toujours préférable d'utiliser SASS ou autre.
codenoob

L'utilisation de vars CSS peut être préférable à SASS car avec SASS, les couleurs ne peuvent être modifiées que statiquement. Avec CSS vars, les couleurs peuvent être modifiées au moment de l'exécution, c'est-à-dire que vous pouvez passer en "mode sombre" avec un bouton en utilisant javascript.
Nick Crews


20

Il n'y a pas de solution CSS simple. Vous pouvez faire ceci:

  • Recherchez toutes les instances de background-coloret colordans 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; }
  • Ensuite, parcourez chaque page de votre site où la couleur était impliquée et ajoutez les classes appropriées pour la couleur et la couleur d'arrière-plan.

  • Enfin, supprimez toutes les références de couleurs dans votre CSS autres que vos classes de couleurs nouvellement créées.


1
Mais que se passe-t-il si le client décide de rendre tous les éléments rouges verts? Il faudrait changer la classe "rouge" pour fournir "color: green", ce qui devient déroutant et difficile à maintenir.
singingwolfboy

@singingwolfboy, j'aurais dû être plus précis dans le nom des classes. Il est plus facile de référencer à quel (s) élément (s) ils se rapportent afin de pouvoir les modifier facilement à l'avenir.
Corey Ballou

8
@downvoters, c'est une solution CSS UNIQUEMENT . Il existe de nombreuses solutions alternatives impliquant des scripts ou une CLI, c'est pour les personnes qui n'ont pas l'intention de le faire .
Corey Ballou

17

Yeeeaaahhh .... vous pouvez maintenant utiliser la fonction var ( ) en CSS .. ...

La bonne nouvelle est que vous pouvez le changer en utilisant un accès JavaScript , qui changera également au niveau mondial ...

Mais comment les déclarer ...

C'est assez simple:

Par exemple, vous voulez attribuer un #ff0000à un var(), affectez-le simplement à :root, faites également attention à --:

:root {
    --red: #ff0000; 
}

html, body {
    background-color: var(--red); 
}

Les bonnes choses sont que le support du navigateur n'est pas mauvais, n'a pas besoin d'être compilé pour être utilisé dans le navigateur comme LESSou SASS...

prise en charge du navigateur

En outre, voici un simple script JavaScript, qui change la valeur rouge en bleu:

const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');


9

Oui, dans un futur proche (j'écris ceci en juin 2012), vous pouvez définir des variables CSS natives, sans utiliser moins / sass, etc.! Le moteur Webkit vient d'implémenter les premières règles de variable CSS, donc les versions de pointe de Chrome et Safari doivent déjà fonctionner avec elles. Voir le journal de développement officiel de Webkit (Chrome / Safari) avec une démo de navigateur css sur site.

J'espère que nous pourrons nous attendre à une prise en charge généralisée par le navigateur des variables CSS natives dans les prochains mois.


2
@Daniel Make that 2015
Still.Tony

4

N'utilisez pas de variables css3 en raison de la prise en charge.

Je ferais ce qui suit si vous voulez une solution CSS pure.

  1. Utilisez des classes de couleurs avec des noms séméniques .

    .bg-primary   { background: #880000; }
    
    .bg-secondary { background: #008800; }
    
    .bg-accent    { background: #F5F5F5; }
  2. Séparer la structure de la peau (OOCSS)

    /* Instead of */
    
    h1 { 
        font-size: 2rem;
        line-height: 1.5rem;
        color: #8000;
    }
    
    /* use this */
    
    h1 { 
        font-size: 2rem;
        line-height: 1.5rem;
    }
    
    .bg-primary {
        background: #880000;
    }
    
    /* This will allow you to reuse colors in your design */
  3. Mettez-les dans un fichier css séparé pour les modifier au besoin.


3

Vous pouvez passer le CSS via javascript et remplacer toutes les instances de COLOUR1 par une certaine couleur (essentiellement regex) et fournir une feuille de style de sauvegarde au cas où l'utilisateur final aurait désactivé JS


3

Je ne comprends pas pourquoi vous ne pouvez pas utiliser PHP. Vous pouvez ensuite simplement ajouter et utiliser des variables comme vous le souhaitez, enregistrer le fichier en tant que fichier PHP et lier à ce fichier .php en tant que feuille de style au lieu du fichier .css.

Il n'est pas nécessaire que ce soit PHP, mais vous comprenez ce que je veux dire.

Lorsque nous voulons des choses de programmation, pourquoi ne pas utiliser un langage de programmation jusqu'à ce que CSS (peut-être) prenne en charge des choses comme les variables?

Consultez également le CSS orienté objet de Nicole Sullivan .


Nous ne pouvons pas tous utiliser PHP parce que le travail exige que certains d'entre nous ne le fassent pas!
horiatu

3

dicejs.com (officiellement cssobjs) est une version côté client de SASS. Vous pouvez définir des variables dans votre CSS (stockées dans du CSS au format json) et réutiliser vos variables de couleur.

//create the CSS JSON object with variables and styles
var myCSSObjs = {
  cssVariables : {
    primaryColor:'#FF0000',
    padSmall:'5px',
    padLarge:'$expr($padSmall * 2)'
  }
  'body' : {padding:'$padLarge'},
  'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
  '.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};

//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();

Et voici un lien vers une démo téléchargeable complète qui est un peu plus utile que leur documentation: démo dicejs


Cet outil ne semble plus être disponible en 2014
Daniel

3

Pensez à utiliser SCSS. Il est entièrement compatible avec la syntaxe CSS, donc un fichier CSS valide est également un fichier SCSS valide. Cela facilite la migration, changez simplement le suffixe. Il présente de nombreuses améliorations, les plus utiles étant les variables et les sélecteurs imbriqués.

Vous devez l'exécuter via un pré-processeur pour le convertir en CSS avant de l'envoyer au client.

Je suis un développeur CSS hardcore depuis de nombreuses années maintenant, mais depuis que je me suis forcé à faire un projet dans SCSS, je n'utiliserai plus rien d'autre.


2

Si vous avez Ruby sur votre système, vous pouvez le faire:

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

Ceci a été fait pour Rails, mais voir ci-dessous pour savoir comment le modifier pour l'exécuter de manière autonome.

Vous pouvez utiliser cette méthode indépendamment de Rails, en écrivant un petit script wrapper Ruby qui fonctionne en conjonction avec site_settings.rb et prend en compte vos chemins CSS, et que vous pouvez appeler chaque fois que vous souhaitez régénérer votre CSS (par exemple lors du démarrage du site)

Vous pouvez exécuter Ruby sur à peu près n'importe quel système d'exploitation, donc cela devrait être assez indépendant de la plate-forme.

par exemple wrapper: generate_CSS.rb (exécutez ce script chaque fois que vous devez générer votre CSS)

#/usr/bin/ruby  # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level 

CSS_IN_PATH  = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' ) 

Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )

la méthode generate_CSS_files dans site_settings.rb doit ensuite être modifiée comme ceci:

module Site
#   ... see above link for complete contents

  # Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
  # replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
  #
  # We will only generate CSS files if they are deleted or the input file is newer / modified
  #
  def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') , 
                              output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
    # assuming all your CSS files live under "./public/stylesheets"
    Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
      filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))

      # if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
      if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
        # in this case, we'll need to create the output CSS file fresh:
        puts " processing #{filename_in}\n --> generating #{filename_out}"

        out_file = File.open( filename_out, 'w' )
        File.open( filename_in , 'r' ).each do |line|
          if line =~ /^\s*\/\*/ || line =~ /^\s+$/             # ignore empty lines, and lines starting with a comment
            out_file.print(line)
            next
          end
          while  line =~ /#(\w+)#/  do                         # substitute all the constants in each line
            line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
          end
          out_file.print(line)
        end
        out_file.close
      end # if ..
    end
  end # def self.generate_CSS_files

end # module Site

2

Vous pouvez regrouper les sélecteurs:

#selector1, #selector2, #selector3 { color: black; }

2

Bien sûr, en quelque sorte, grâce au monde merveilleux de plusieurs classes, vous pouvez le faire:

.red {color:red}
.blackBack {background-color: black}

mais je finis souvent par les combiner comme ça:

.highlight {color:red, background-color: black}

Je sais que la police sémantique sera partout sur toi, mais ça marche.


1
J'ajouterais: utiliser des noms différents et plus sémantiques. Si les couleurs de marque changent, vous refaitez beaucoup de code html. Utilisez des noms de classe comme .primary, .secondary, .accent, etc.
Eric Harms

2

Pas PHP, je le crains, mais Zope et Plone utilisent quelque chose de similaire à SASS appelé DTML pour y parvenir. C'est incroyablement utile dans les CMS.

Upfront Systems a un bon exemple de son utilisation dans Plone.


1

Si vous écrivez le fichier css en tant que modèle xsl, vous pouvez lire les valeurs de couleur à partir d'un simple fichier xml. Créez ensuite le css avec un processeur xslt.

colours.xml:

<?xml version="1.0"?>
<colors>
    <background>#ccc</background>
</colors>

styles.xsl:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
    <xsl:template match="/">body {
    background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>

Commande pour rendre css: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

body {
    background-color: #ccc;
}

0

Ce n'est pas possible avec CSS seul.

Vous pouvez le faire avec JavaScript et LESS en utilisant less.js , qui rendra les variables LESS en CSS en direct, mais c'est uniquement pour le développement et ajoute trop de surcharge pour une utilisation réelle.

Le plus proche que vous pouvez faire avec CSS est d'utiliser un sélecteur de sous-chaîne d'attribut comme celui-ci:

[id*="colvar-"] {
    color: #f0c69b;
}

et définissez les ids de tous vos éléments que vous souhaitez ajuster en commençant par des noms colvar-, tels que colvar-header. Ensuite, lorsque vous modifiez la couleur, tous les styles d'ID sont mis à jour. C'est aussi proche que possible avec CSS seul.


Je le fais avec CSS seul, c'est avec des variables css Exemple Mozilla
Arthur Weborg

c'est super si tous vos utilisateurs utilisent mozilla - bonne chance avec ça
user2317093

Fonctionne également avec le chrome, le safari et l'opéra.
Arthur Weborg

pmsl ce qui est avec les corrections de grammaire capricieuses du lycée dans mon poste par l'OP? Ce n'était pas si mal.
user2317093
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.