web-dev-qa-db-fra.com

Comment définir des couleurs en tant que variables en CSS?

Je travaille sur un fichier CSS assez long. Je sais que le client pouvait demander des modifications de la palette de couleurs. Je me demandais s'il est possible d'affecter des couleurs à des variables afin de pouvoir modifier une variable afin d'appliquer la nouvelle couleur à tous les éléments qui l'utilisent.

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

cssvariablescolorscss-variables
193
patrick

CSS le supporte nativement avec variables CSS .

Exemple de fichier CSS 

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

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

Pour un exemple pratique, veuillez vous reporter à this JSFiddle (cet exemple montre l’un des sélecteurs CSS du violon a la couleur codée en bleu, l’autre sélecteur CSS utilise des variables CSS, les syntaxes originale et actuelle, définir la couleur en 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 + est livré avec un support natif pour les variables CSS.

194
Arthur Weborg

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

Vous pouvez mettre un commentaire dans le fichier CSS avant chaque couleur afin de servir de sorte de variable, que vous pouvez modifier pour utiliser la valeur find/replace, 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 tard dans le fichier CSS

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

Ensuite, par exemple, modifiez le jeu de couleurs du texte de la boîte sur lequel vous effectuez une recherche/remplacement.

/*bt*/#123456
67
wheresrhys

CSS lui-même n'utilise pas de variables. Cependant, vous pouvez utiliser un autre langage, tel que SASS , pour définir votre style à l'aide de variables et générer automatiquement des fichiers CSS, que vous pourrez ensuite afficher sur le Web. Notez que vous devrez réexécuter le générateur chaque fois que vous apportez une modification à votre code CSS, mais ce n'est pas si difficile.

40
singingwolfboy

Vous pouvez essayer variables CSS :

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

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

  • Recherchez toutes les occurrences 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; }

  • Ensuite, parcourez toutes les pages de votre site où la couleur est impliquée et ajoutez les classes appropriées pour la couleur et la couleur d'arrière-plan.

  • Enfin, supprimez toute référence de couleur dans votre CSS autre que les classes de couleur que vous venez de créer.

19
Corey Ballou

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

La bonne nouvelle est que vous pouvez le changer en utilisant un accès JavaScript , qui changera également à l'échelle mondiale ...

Mais comment les déclarer ...

C'est assez simple:

Par exemple, vous voulez assigner un #ff0000 à une var(), il vous suffit de l'attribuer dans :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, il n’a pas non plus besoin d’être compilé pour être utilisé dans le navigateur comme LESS ou SASS...

browser support

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

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

Le 'Moins' Ruby Gem pour CSS est génial.

http://lesscss.org/

8
Erin

Oui, dans un avenir rapproché (j'écris ceci en juin 2012), vous pouvez définir des variables css natives, sans utiliser less/sass, etc.! Le moteur Webkit vient d'implémenter les premières règles de variables css. Il est donc déjà possible de couper les versions Edge de Chrome et Safari. Voir le journal de développement officiel de Webkit (Chrome/Safari) avec une démonstration du navigateur css sur site.

Espérons que nous pourrons nous attendre à une prise en charge généralisée par le navigateur des variables CSS natives au cours des prochains mois.

8
Sliq

Je ne comprends pas pourquoi vous ne pouvez pas utiliser PHP. Vous pouvez ensuite simplement ajouter et utiliser des variables à votre guise, enregistrer le fichier en tant que fichier PHP et créer un lien vers ce fichier .php en tant que feuille de style au lieu du fichier .css.

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

Quand on veut des choses de programmation, pourquoi ne pas utiliser un langage de programmation jusqu'à ce que CSS (peut-être) supporte des choses comme des variables?

Découvrez également CSS orientée objet de Nicole Sullivan.

3
stephenhay

dicejs.com (anciennement cssobjs) est une version client de SASS. Vous pouvez définir des variables dans votre CSS (stockées dans un fichier CSS 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 complète téléchargeable qui est un peu plus utile que leur documentation: démo dicejs

2
John David Five

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

2
Arcath

Pensez à utiliser SCSS. Il est totalement compatible avec la syntaxe CSS, de sorte qu'un fichier CSS valide est également un fichier SCSS valide. Cela facilite la migration, il suffit de changer le suffixe. Il comporte 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'expédier au client.

Je suis un développeur CSS expérimenté depuis de nombreuses années, mais depuis que je me suis forcé à faire un projet dans SCSS, je n’utilise plus rien d’autre.

2
superluminary

Ne pas utiliser les variables CSS3 en raison de la prise en charge.

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

  1. Utilisez des classes de couleur avec des noms semenatic.

    .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. Placez-les dans un fichier css séparé pour les modifier si nécessaire.

2
Eric Harms

Vous pouvez grouper les sélecteurs:

#selector1, #selector2, #selector3 { color: black; }
1
Botond Vajna

En quelque sorte, grâce au monde merveilleux de plusieurs classes, nous pouvons le faire:

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

mais je finis souvent par les combiner comme ceci:

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

Je sais que la police sémantique sera sur vous, mais ça fonctionne.

1
Chalky

Non PHP J'ai bien peur, mais Zope et Plone utilisent quelque chose de similaire au 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
Jon Hadley

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

Cela a été fait pour Rails, mais voir ci-dessous pour savoir comment le modifier pour qu'il fonctionne de manière autonome.

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

Vous pouvez exécuter Ruby sur à peu près tous les systèmes d'exploitation. Ce système devrait donc ê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 suit:

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
1
Tilo

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 fichier css avec un processeur xslt.

couleurs.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
Cole Tierney