Erstellen Sie eine Variable in der .CSS-Datei zur Verwendung in dieser .CSS-Datei [Duplikat]

StackOverflow https://stackoverflow.com/questions/47487

  •  09-06-2019
  •  | 
  •  

Frage

Mögliches Duplikat:
Vermeiden Sie wiederholte Konstanten in CSS

Wir haben einige „Themenfarben“, die in unserem CSS-Blatt wiederverwendet werden.

Gibt es eine Möglichkeit, eine Variable festzulegen und sie dann wiederzuverwenden?

Z.B.

.css
OurColor: Blue

H1 { 
 color:OurColor;
}
War es hilfreich?

Lösung

Es besteht keine Anforderung, dass alle Stile für einen Selektor in einer einzigen Regel enthalten sein müssen, und eine einzelne Regel kann für mehrere Selektoren gelten ...Also dreh es um:

/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }

/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }

/* ... */

/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }

/* ... */

/* H1-specific styles */
H1
{ 
   font-size: 2em; 
   margin-bottom: 1em;
}

Auf diese Weise vermeiden Sie, dass sich Stile wiederholen konzeptionell das Gleiche, machen aber auch deutlich, welche Teile des Dokuments sie betreffen.

Beachten Sie die Betonung auf „konzeptionell“ im letzten Satz ...Das ist gerade in den Kommentaren aufgetaucht, also werde ich es etwas näher erläutern, da ich gesehen habe, wie Leute seit Jahren immer wieder denselben Fehler gemacht haben – sogar schon vor der Existenz von CSS: Wenn zwei Attribute denselben Wert haben, bedeutet dies nicht zwangsläufig, dass sie dasselbe darstellen Konzept.Der Himmel mag am Abend rot erscheinen, und das gilt auch für Tomaten – aber der Himmel und die Tomate sind aus demselben Grund und aus denselben Farben nicht rot Wille variieren im Laufe der Zeit unabhängig voneinander.Aus dem gleichen Grund bedeutet die Tatsache, dass Sie zufällig zwei Elemente in Ihrem Stylesheet haben, denen die gleiche Farbe, Größe oder Positionierung zugewiesen wird, nicht, dass dies auch der Fall ist stets Teilen Sie diese Werte.Ein naiver Designer, der Gruppierung (wie hier beschrieben) oder einen Variablenprozessor wie SASS oder LESS verwendet, um dies zu vermeiden Wert Wiederholungen bergen das Risiko, dass zukünftige Änderungen am Design unglaublich fehleranfällig werden.Konzentrieren Sie sich immer auf das kontextuelle Bedeutung von Stilen, wenn man versucht, Wiederholungen zu reduzieren, indem man sie ignoriert aktuelle Werte.

Andere Tipps

Sie können dies und noch viel mehr erreichen, indem Sie verwenden Weniger CSS.

Nein, aber Sass macht dies.Es handelt sich um einen CSS-Präprozessor, der es Ihnen ermöglicht, viele Verknüpfungen zu verwenden, um die Menge an CSS zu reduzieren, die Sie schreiben müssen.

Zum Beispiel:

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Über Variablen hinaus bietet es die Möglichkeit, Selektoren zu verschachteln und so die Dinge logisch gruppiert zu halten:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Es gibt mehr:Mixins, die sich wie Funktionen verhalten, und die Möglichkeit, einen Selektor von einem anderen zu erben.Es ist sehr clever und sehr nützlich.

Wenn Sie in Ruby on Rails programmieren, wird es sogar automatisch für Sie in CSS kompiliert, es gibt aber auch einen Allzweck-Compiler, der dies bei Bedarf für Sie erledigt.

Sie sind nicht der Erste, der sich das fragt, und die Antwort lautet: Nein.Elliotte hat eine nette Schimpftirade dazu: http://cafe.elharo.com/web/css-repeats-itself/.Sie können JSP oder ein Äquivalent verwenden, um das CSS zur Laufzeit zu generieren.

CSS bietet so etwas nicht an.Die einzige Lösung besteht darin, ein Vorverarbeitungsskript zu schreiben, das entweder manuell ausgeführt wird, um eine statische CSS-Ausgabe basierend auf einem dynamischen Pseudo-CSS zu erzeugen, oder das an den Webserver angeschlossen wird und das CSS vorverarbeitet, bevor es an den Client gesendet wird.

Dies wird derzeit nicht unterstützt, es sei denn, Sie verwenden ein Skript, um das CSS auf der Grundlage einiger von Ihnen definierter Variablen zu erstellen.

Es scheint jedoch, dass zumindest einige Leute aus der Browserwelt dies tun arbeiten daran.Wenn es also irgendwann in der Zukunft wirklich zum Standard wird, müssen wir warten, bis es in allen Browsern implementiert ist (bis dahin wird es unbrauchbar sein).

Da CSS dies nicht bietet (ich glaube jedoch, dass die nächste Version dies nicht tun wird), befolgen Sie Konrad Rudolphs Rat für die Vorverarbeitung.Sie möchten wahrscheinlich eines verwenden, das bereits existiert:m4

http://www.gnu.org/software/m4/m4.html

Du machst es zu kompliziert.Aus diesem Grund existiert die Kaskade.Geben Sie einfach Ihre Elementselektoren an und klassifizieren Sie Ihre Farbe:

h1 {
   color: #000;
}
.a-theme-color {
   color: #333;
}

Wenden Sie es dann auf die Elemente im HTML an und überschreiben Sie es, wenn Sie Ihre Designfarben verwenden müssen.

<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>

Ich habe ein Makro (in Visual Studio) geschrieben, mit dem ich nicht nur CSS für benannte Farben codieren, sondern auch problemlos Schattierungen oder Mischungen dieser Farben berechnen kann.Es verarbeitet auch Schriftarten.Es wird beim Speichern ausgelöst und gibt eine separate Version der CSS-Datei aus.Dies steht im Einklang mit Das Argument von Bert Bos dass jegliche Symbolverarbeitung in CSS zum Zeitpunkt der Erstellung und nicht zum Zeitpunkt der Interpretation erfolgt.

Das vollständige Setup zusammen mit dem gesamten Code wäre etwas zu kompliziert, um es hier zu veröffentlichen, könnte aber für einen späteren Blog-Beitrag geeignet sein.Hier ist der Kommentarbereich des Makros, der für den Anfang ausreichen sollte.

Die Ziele dieses Ansatzes sind wie folgt:

  1. Grundfarben, Schriftarten usw. zulassen.an einem zentralen Ort definiert werden, sodass eine ganze Palette oder typografische Behandlung einfach optimiert werden kann, ohne Suchen/Ersetzen verwenden zu müssen

  2. Vermeiden Sie die Zuordnung der .CSS-Erweiterung in IIS

  3. Generieren Sie Text-CSS-Dateien für den Garten, die beispielsweise im Designmodus von VisualStudio verwendet werden können

  4. Generieren Sie diese Dateien einmal beim Erstellen, anstatt sie jedes Mal neu zu berechnen, wenn die CSS-Datei angefordert wird

  5. Generieren Sie diese Dateien sofort und transparent, ohne zusätzliche Schritte zum Tweak-Save-Test-Workflow hinzuzufügen

Bei diesem Ansatz werden Farben, Farbschattierungen und Schriftfamilien alle mit Kurzschrift-Tokens dargestellt, die auf eine Werteliste in einer XML-Datei verweisen.

Die XML-Datei mit den Farb- und Schriftartdefinitionen muss Constants.xml heißen und sich im selben Ordner wie die CSS-Dateien befinden.

Die ProcessCSS-Methode wird von EnvironmentEvents immer dann ausgelöst, wenn VisualStudio eine CSS-Datei speichert.Die CSS-Datei wird erweitert und die erweiterte, statische Version der Datei wird im Ordner /css/static/ gespeichert.(Alle HTML-Seiten sollten auf die /css/static/-Versionen der CSS-Dateien verweisen.)

Die Datei „Constants.xml“ könnte etwa so aussehen: 

<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
  <colors>
    <color name="Red" value="BE1E2D" />
    <color name="Orange" value="E36F1E" />
    ...
  </colors>
  <fonts>
    <font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
    <font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
    ...
  </fonts>
</cssconstants>

In der CSS-Datei können Sie dann Definitionen haben wie:

   font-family:[[f:Text]];
   background:[[c:Background]]; 
   border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */

Siehe auch Vermeiden Sie wiederholte Konstanten in CSS.Wie Farinha sagte, wurde ein Vorschlag für CSS-Variablen gemacht, aber vorerst möchten Sie einen Präprozessor verwenden.

Sie können im Klassenattribut des HTML-Elements mehrere Klassen verwenden, die jeweils einen Teil des Stils bereitstellen.Sie könnten Ihr CSS also wie folgt definieren:

.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }

und kombinieren Sie dann die Klassen nach Bedarf:

<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>

Dadurch können Sie die Klasse ourColor wiederverwenden, ohne die Farbe mehrmals in Ihrem CSS definieren zu müssen.Wenn Sie das Thema ändern, ändern Sie einfach die Regel für unsere Farbe.

Das klingt vielleicht verrückt, aber wenn Sie NAnt (oder Ant oder ein anderes automatisiertes Build-System) verwenden, können Sie NAnt-Eigenschaften auf hackige Weise als CSS-Variablen verwenden.Beginnen Sie mit einer CSS-Vorlagendatei (vielleicht „styles.css.template“ oder so etwas), die etwa Folgendes enthält:

a {
    color: ${colors.blue};
}

    a:hover {
        color: ${colors.blue.light};
    }

p {
    padding: ${padding.normal};
}

Und fügen Sie dann Ihrem Build einen Schritt hinzu, der alle Eigenschaftswerte zuweist (ich verwende externe Builddateien und <include>) und den Filter <expandproperties> verwendet, um das eigentliche CSS zu generieren:

<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />

<copy file="styles.css.template" tofile="styles.css" overwrite="true">
    <filterchain>
        <expandproperties/>
    </filterchain>
</copy>

Der Nachteil besteht natürlich darin, dass Sie das CSS-Generierungsziel ausführen müssen, bevor Sie überprüfen können, wie es im Browser aussieht.Und es würde Sie wahrscheinlich darauf beschränken, Ihr gesamtes CSS von Hand zu generieren.

Sie können jedoch NAnt-Funktionen schreiben, um alle möglichen coolen Dinge zu tun, die über die bloße Eigenschaftserweiterung hinausgehen (z. B. das dynamische Erzeugen von Verlaufsbilddateien). Für mich hat sich die Mühe also gelohnt.

CSS verwendet (noch) keine Variablen, was für sein Alter und die Tatsache, dass es sich um eine deklarative Sprache handelt, verständlich ist.

Hier sind zwei Hauptansätze, um eine dynamischere Stilverarbeitung zu erreichen:

  • Serverseitige Variablen in Inline-CSS
    Beispiel (mit PHP):

    <style> .myclass{color:<?php echo $color; ?>;} </style>

 

  • DOM-Manipulation mit Javascript, um CSS clientseitig zu ändern
    Beispiele (unter Verwendung der jQuery-Bibliothek):

    $('.myclass').css('color', 'blue');

    ODER

    //The jsvarColor could be set with the original page response javascript
    // in the DOM or retrieved on demand (AJAX) based on user action. $('.myclass').css('color', jsvarColor);

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top