Comment définir des couleurs comme variables en CSS?

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.

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.

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

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.

Vous pouvez essayer des variables CSS3 :

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

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.

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...

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

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

Le «moins» Ruby Gem pour CSS est génial.

http://lesscss.org/

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.

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.

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

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 .

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

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.

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

Vous pouvez regrouper les sélecteurs:

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

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.

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.

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;
}

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.