Wie kann ich Farben als Variablen in CSS definieren?

Ich arbeite an einer CSS-Datei, die ziemlich lang ist. Ich weiß, dass der Client Änderungen am Farbschema beantragen kann, und habe mich gefragt: Ist es möglich, Variablen Farben zuzuweisen, sodass ich einfach eine Variable ändern kann, damit die neue Farbe auf alle Elemente angewendet wird, die sie verwenden?

Bitte beachten Sie, dass ich PHP nicht verwenden kann, um die CSS-Datei dynamisch zu ändern.

CSS unterstützt dies nativ mit CSS-Variablen .

Beispiel CSS-Datei

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

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

Ein funktionierendes Beispiel finden Sie in dieser JSFiddle (das Beispiel zeigt, dass einer der CSS-Selektoren in der Geige die Farbe fest auf Blau codiert hat, der andere CSS-Selektor verwendet CSS-Variablen, sowohl die ursprüngliche als auch die aktuelle Syntax, um die Farbe auf Blau festzulegen). .

Bearbeiten einer CSS-Variablen in JavaScript / Client

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

Unterstützung wird in allen modernen Browsern angeboten

Firefox 31+ , Chrome 49+ , Safari 9.1+ , Microsoft Edge 15+ und Opera 36+ werden mit nativer Unterstützung für CSS-Variablen ausgeliefert.

Die Leute stimmen meiner Antwort immer wieder zu, aber es ist eine schreckliche Lösung im Vergleich zur Freude an Sass oder weniger , insbesondere angesichts der Anzahl der einfach zu bedienenden Guis für beide in diesen Tagen. Wenn Sie einen Sinn haben, ignorieren Sie alles, was ich unten vorschlage.

Sie können vor jeder Farbe einen Kommentar in das CSS einfügen, um als eine Art Variable zu dienen. Sie können den Wert der Verwendung von Suchen / Ersetzen ändern, also ...

Oben in der CSS-Datei

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

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

*/

Später in der CSS-Datei

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

Ändern Sie dann beispielsweise das Farbschema für den Feldtext, für den Sie suchen / ersetzen

/*bt*/#123456

CSS selbst verwendet keine Variablen. Sie können jedoch eine andere Sprache wie SASS verwenden , um Ihr Styling mithilfe von Variablen zu definieren und automatisch CSS-Dateien zu erstellen, die Sie dann im Web bereitstellen können. Beachten Sie, dass Sie den Generator jedes Mal neu ausführen müssen, wenn Sie Änderungen an Ihrem CSS vornehmen, aber das ist nicht so schwierig.

Sie können CSS3-Variablen ausprobieren :

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

Es gibt keine einfache CSS-Lösung. Sie könnten dies tun:

• Suchen Sie alle Instanzen von background-colorund colorin Ihrer CSS-Datei und erstellen Sie einen Klassennamen für jede eindeutige Farbe.

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

• Gehen Sie als Nächstes jede einzelne Seite Ihrer Site durch, an der Farbe beteiligt war, und fügen Sie die entsprechenden Klassen für Farbe und Hintergrundfarbe hinzu.

• Entfernen Sie zuletzt alle Farbreferenzen in Ihrem CSS außer Ihren neu erstellten Farbklassen.

Yeeeaaahhh .... Sie können jetzt die var ( ) -Funktion in CSS verwenden .. ...

Die gute Nachricht ist, dass Sie es mithilfe des JavaScript- Zugriffs ändern können , der sich auch global ändern wird ...

Aber wie man sie deklariert ...

Es ist ganz einfach:

Zum Beispiel möchten Sie a #ff0000einem var()zuweisen, es einfach zuweisen :rootund auch Folgendes beachten --:

:root {
    --red: #ff0000; 
}

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

Das Gute ist, dass die Browserunterstützung nicht schlecht ist, auch nicht kompiliert werden muss, um im Browser wie LESSoder SASS...

Hier ist auch ein einfaches JavaScript-Skript, das den Rotwert in Blau ändert:

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

Das "weniger" Ruby Gem für CSS sieht fantastisch aus.

http://lesscss.org/

Ja, in naher Zukunft (ich schreibe dies im Juni 2012) können Sie native CSS-Variablen definieren, ohne weniger / sass usw. zu verwenden! Die Webkit-Engine hat gerade die ersten CSS-Variablenregeln implementiert, sodass die neuesten Versionen von Chrome und Safari bereits mit ihnen funktionieren sollen. Weitere Informationen finden Sie im offiziellen Webkit-Entwicklungsprotokoll (Chrome / Safari) mit einer CSS-Browser-Demo vor Ort.

Hoffentlich können wir in den nächsten Monaten eine umfassende Browserunterstützung für native CSS-Variablen erwarten.

Verwenden Sie aus Gründen der Unterstützung keine CSS3-Variablen.

Ich würde Folgendes tun, wenn Sie eine reine CSS-Lösung wünschen.

1. Verwenden Sie Farbklassen mit Samennamen .

   .bg-primary   { background: #880000; }
   
   .bg-secondary { background: #008800; }
   
   .bg-accent    { background: #F5F5F5; }

2. Trennen Sie die Struktur von der Haut (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. Legen Sie diese in eine separate CSS-Datei, um sie nach Bedarf zu ändern.

Sie können das CSS über Javascript übergeben und alle Instanzen von COLOUR1 durch eine bestimmte Farbe ersetzen (im Grunde genommen eine Regex-Version) und ein Backup-Stylesheet bereitstellen, falls der Endbenutzer JS deaktiviert hat

Mir ist nicht klar, warum Sie PHP nicht verwenden können. Sie können dann einfach Variablen hinzufügen und verwenden, die Datei als PHP-Datei speichern und anstelle der CSS-Datei als Stylesheet mit dieser PHP-Datei verknüpfen.

Es muss nicht PHP sein, aber Sie verstehen, was ich meine.

Wenn wir Programmiermaterial wollen, warum nicht eine Programmiersprache verwenden, bis CSS (vielleicht) Dinge wie Variablen unterstützt?

Schauen Sie sich auch Nicole Sullivans objektorientiertes CSS an .

dicejs.com (formal cssobjs) ist eine clientseitige Version von SASS. Sie können Variablen in Ihrem CSS festlegen (gespeichert in json-formatiertem CSS) und Ihre Farbvariablen wiederverwenden.

//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();

Und hier ist ein Link zu einer vollständigen herunterladbaren Demo, die etwas hilfreicher ist als ihre Dokumentation: dicejs Demo

Erwägen Sie die Verwendung von SCSS. Es ist voll kompatibel mit der CSS-Syntax, daher ist eine gültige CSS-Datei auch eine gültige SCSS-Datei. Dies erleichtert die Migration. Ändern Sie einfach das Suffix. Es verfügt über zahlreiche Verbesserungen, wobei Variablen und verschachtelte Selektoren am nützlichsten sind.

Sie müssen es über einen Vorprozessor ausführen, um es in CSS zu konvertieren, bevor Sie es an den Client senden.

Ich bin seit vielen Jahren ein Hardcore-CSS-Entwickler, aber da ich mich gezwungen habe, ein Projekt in SCSS durchzuführen, werde ich jetzt nichts anderes mehr verwenden.

Wenn Sie Ruby auf Ihrem System haben, können Sie dies tun:

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

Dies wurde für Rails erstellt. Im Folgenden erfahren Sie jedoch, wie Sie es so ändern können, dass es eigenständig ausgeführt wird.

Sie können diese Methode unabhängig von Rails verwenden, indem Sie ein kleines Ruby-Wrapper-Skript schreiben, das in Verbindung mit site_settings.rb funktioniert und Ihre CSS-Pfade berücksichtigt und das Sie jedes Mal aufrufen können, wenn Sie Ihr CSS neu generieren möchten (z während des Site-Starts)

Sie können Ruby auf so ziemlich jedem Betriebssystem ausführen, daher sollte dies ziemlich plattformunabhängig sein.

Beispiel: wrapper: generate_CSS.rb (Führen Sie dieses Skript aus, wenn Sie Ihr CSS generieren müssen.)

#/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 )

Die Methode generate_CSS_files in site_settings.rb muss dann wie folgt geändert werden:

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

Sie können Selektoren gruppieren:

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

Sicher kann man dank der wundervollen Welt mehrerer Klassen dies irgendwie tun:

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

aber am Ende kombiniere ich sie trotzdem oft so:

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

Ich weiß, dass die semantische Polizei überall auf Ihnen sein wird, aber es funktioniert.

Ich fürchte, nicht PHP, aber Zope und Plone verwenden etwas Ähnliches wie SASS namens DTML , um dies zu erreichen. Es ist unglaublich nützlich in CMS.

Upfront Systems hat ein gutes Beispiel für die Verwendung in Plone.

Wenn Sie die CSS-Datei als XML-Vorlage schreiben, können Sie Farbwerte aus einer einfachen XML-Datei lesen. Erstellen Sie dann das CSS mit einem xslt-Prozessor.

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

Befehl zum Rendern von CSS: xsltproc -o styles.css styles.xsl colors.xml

styles.css:

body {
    background-color: #ccc;
}

Mit CSS allein ist das nicht möglich.

Sie können dies mit JavaScript und WENIGER mit less.js tun , wodurch WENIGER Variablen live in CSS gerendert werden. Dies ist jedoch nur für die Entwicklung vorgesehen und erhöht den Overhead für den realen Gebrauch.

Mit CSS können Sie am ehesten einen Attribut-Teilzeichenfolgen-Selektor wie den folgenden verwenden:

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

und setzen Sie die ids aller Ihrer Elemente, die Sie anpassen möchten, auf Namen, die mit beginnen colvar-, wie z colvar-header. Wenn Sie dann die Farbe ändern, werden alle ID-Stile aktualisiert. Das ist so nah wie möglich mit CSS allein.