webentwicklung-frage-antwort-db.com.de

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 verlangen kann, und habe mich gefragt: Ist es möglich, Variablen Farben zuzuweisen, sodass ich nur 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.

193
patrick

CSS unterstützt dies nativ mit CSS-Variablen .

Beispiel einer CSS-Datei

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

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

Ein funktionierendes Beispiel finden Sie unter this JSFiddle (das Beispiel zeigt, dass einer der CSS-Selektoren in der Geige die Farbe hart 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 zu stellen).

Manipulieren einer CSS-Variablen in JavaScript/clientseitig

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

Unterstützung ist in allen modernen Browsern

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

194
Arthur Weborg

Die Leute stimmen weiter über meine Antwort ab, aber es ist eine schreckliche Lösung im Vergleich zur Freude an sass oder less , insbesondere angesichts der Anzahl der leicht zu behebenden benutze gui's 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, mit der Sie den Wert der Verwendung von Suchen/Ersetzen ändern können.

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}

Um dann beispielsweise das Farbschema für den Feldtext zu ändern, auf dem Sie suchen/ersetzen

/*bt*/#123456
67
wheresrhys

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 ablegen können. Beachten Sie, dass Sie den Generator jedes Mal neu starten müssen, wenn Sie Änderungen an Ihrem CSS vorgenommen haben, aber das ist nicht so schwierig.

40
singingwolfboy

Sie können versuchen CSS3-Variablen :

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

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

  • Finde alle Instanzen von background-color und color in 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, auf der es um Farbe ging, und fügen Sie die entsprechenden Klassen für Farbe und Hintergrundfarbe hinzu.

  • Entfernen Sie zum Schluss alle Farbreferenzen in Ihrem CSS, die nicht Ihre neu erstellten Farbklassen sind.

19
Corey Ballou

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

Die gute Nachricht ist, dass Sie es mit JavaScript ändern können, was sich auch global ändern wird ...

Aber wie man sie deklariert ...

Es ist ganz einfach:

Zum Beispiel möchten Sie einer var() einen #ff0000 Zuweisen. Weisen Sie ihn einfach in :root Zu und achten Sie auch auf --:

:root {
    --red: #ff0000; 
}

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

Die guten Dinge sind, dass die Browserunterstützung nicht schlecht ist und auch nicht kompiliert werden muss, um im Browser wie LESS oder SASS ... verwendet zu werden.

browser support

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

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

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

http://lesscss.org/

8
Erin

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

Hoffentlich können wir in den nächsten Monaten mit einer umfassenden Browserunterstützung für native CSS-Variablen rechnen.

8
Sliq

Mir ist nicht klar, warum Sie PHP nicht verwenden können. Sie können dann einfach Variablen hinzufügen und verwenden, wie Sie möchten, die Datei als PHP) - Datei speichern und anstelle der CSS-Datei eine Verknüpfung zu dieser .php-Datei als Stylesheet erstellen.

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

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

Schauen Sie sich auch Nicole Sullivans Objektorientiertes CSS an.

3
stephenhay

dicejs.com (formal cssobjs) ist eine clientseitige Version von SASS. Sie können Variablen in Ihrem CSS festlegen (in json-formatiertem CSS gespeichert) 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

2
John David Five

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

2
Arcath

Erwägen Sie die Verwendung von SCSS. Es ist voll kompatibel mit der CSS-Syntax, sodass eine gültige CSS-Datei auch eine gültige SCSS-Datei ist. Dies macht die Migration einfach, ändern Sie einfach das Suffix. Es hat zahlreiche Verbesserungen, die nützlichsten sind Variablen und verschachtelte Selektoren.

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

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

2
superluminary

Verwenden Sie aus Unterstützungsgründen keine css3-Variablen.

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

  1. Verwenden Sie Farbklassen mit semenatischen Namen.

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

2
Eric Harms

Sie können Selektoren gruppieren:

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

Klar, dank der wundervollen Welt der verschiedenen Klassen kann man das so machen:

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

aber am ende kombiniere ich sie sowieso oft so:

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

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

1
Chalky

Nicht PHP Ich fürchte, 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 seiner Verwendung in Plone.

1
Jon Hadley

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 gemacht, aber siehe unten, wie man es modifiziert, um es alleine laufen zu lassen.

Sie können diese Methode unabhängig von Rails verwenden, indem Sie ein kleines Wrapper-Skript Ruby schreiben, das mit site_settings.rb zusammenarbeitet und Ihre CSS-Pfade berücksichtigt und das Sie bei jeder Neuerstellung aufrufen können Dein CSS (zB beim Start der Seite)

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

z.B. wrapper: generate_CSS.rb (führen Sie dieses Skript immer dann 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 generate_CSS_files-Methode in site_settings.rb muss dann folgendermaßen 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
1
Tilo

Wenn Sie die CSS-Datei als XL-Vorlage schreiben, können Sie Farbwerte aus einer einfachen XML-Datei lesen. Dann erstellen Sie die CSS mit einem XSLT-Prozessor.

colors.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;
}
0
Cole Tierney