Einführung in die Verwendung von Variablen in CSS (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von Variablen in CSS (mit Beispielen). Ich hoffe, dass er Ihnen als Referenz dienen wird. hat geholfen.

Ich habe vor zwei Tagen Ruan Dashens Artikel über die Verwendung von Variablen in CSS gesehen und ihn geklärt.

Diese wichtige neue CSS-Funktion wird bereits von allen gängigen Browsern unterstützt. Dieser Artikel bietet eine umfassende Einführung in die Verwendung und Sie werden feststellen, dass natives CSS äußerst leistungsfähig ist.

1. Deklaration von Variablen

Bei der Deklaration einer Variablen sollten vor dem Variablennamen zwei Bindestriche (--) eingefügt werden.

body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

Im obigen Code werden zwei Variablen im Body-Selektor deklariert: --foo und --bar.

Sie unterscheiden sich nicht von formalen Eigenschaften wie Farbe und Schriftgröße, haben aber keine Standardbedeutung. Daher werden CSS-Variablen auch „CSS-benutzerdefinierte Eigenschaften“ genannt. Denn Variablen und benutzerdefinierte CSS-Eigenschaften sind eigentlich dasselbe.

Sie fragen sich vielleicht, warum zwei Konjunktionslinien (--) zur Darstellung von Variablen ausgewählt werden? Weil $foo von Sass und @foo von Less verwendet wird. Um Konflikte zu vermeiden, verwenden die offiziellen CSS-Variablen stattdessen zwei Konjunktionslinien.

In CSS-Variablen können verschiedene Werte eingegeben werden.

:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;

  --header-height: 68px;
  --content-padding: 10px 20px;

  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

Variablennamen unterscheiden zwischen Groß- und Kleinschreibung, --header-color und --Header-Color sind zwei verschiedene Variablen.

2. var()-Funktion

var()-Funktion wird zum Lesen von Variablen verwendet. Die Funktion

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var() kann auch einen zweiten Parameter verwenden, um den Standardwert der Variablen darzustellen. Wenn die Variable nicht existiert, wird dieser Standardwert verwendet.

color: var(--foo, #7F583F);

Der zweite Parameter verarbeitet keine internen Kommas oder Leerzeichen und sie werden als Teil des Parameters betrachtet. Die Funktion

var(--font-stack, "Roboto", "Helvetica");
var(--pad, 10px 15px 20px);

var() kann auch bei der Deklaration von Variablen verwendet werden.

:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

Beachten Sie, dass Variablenwerte nur als Attributwerte und nicht als Attributnamen verwendet werden können.

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

Im obigen Code wird die Variable --side als Attributname verwendet, was ungültig ist.

3. Typ des Variablenwerts

Wenn der Variablenwert eine Zeichenfolge ist, kann er mit anderen Zeichenfolgen verkettet werden.

--bar: 'hello';
--foo: var(--bar)' world';

Damit können Sie debuggen (Beispiel).

body:after {
  content: '--screen-category : 'var(--screen-category);
}

Wenn der Variablenwert ein numerischer Wert ist, kann er nicht direkt mit der numerischen Einheit verwendet werden.

.foo {
  --gap: 20;
  /* 无效 */
  margin-top: var(--gap)px;
}

Im obigen Code werden Wert und Einheit direkt zusammen geschrieben, was ungültig ist. Sie müssen die Funktion calc() verwenden, um sie zu verbinden.

.foo {
  --gap: 20;
  margin-top: calc(var(--gap) * 1px);
}

Wenn der Variablenwert eine Einheit hat, kann er nicht als String geschrieben werden.

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

4. Geltungsbereich

Die gleiche CSS-Variable kann in mehreren Selektoren deklariert werden. Beim Lesen wird die Anweisung mit der höchsten Priorität wirksam. Dies steht im Einklang mit der CSS-„Kaskaden“-Regel.

Hier ist ein Beispiel.

<style>
  :root { --color: blue; }
  p { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }</style><p>蓝色</p><p>绿色</p><p id="alert">红色</p>

Im obigen Code deklarieren alle drei Selektoren die Variable --color. Wenn verschiedene Elemente diese Variable lesen, wird die Regel mit der höchsten Priorität verwendet, sodass die Farben der drei Textabsätze unterschiedlich sind.

Das heißt, der Gültigkeitsbereich einer Variablen ist der gültige Gültigkeitsbereich des Selektors, in dem sie sich befindet.

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}

Im obigen Code ist der Bereich der Variablen --foo der effektive Bereich des Body-Selektors und der Bereich von --bar der effektive Bereich des .content-Selektors.

Aus diesem Grund werden globale Variablen normalerweise innerhalb des Wurzelelements:root platziert, um sicherzustellen, dass jeder Selektor sie lesen kann.

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

5. Responsives Layout

CSS ist dynamisch und alle Änderungen an der Seite führen zu Änderungen in den übernommenen Regeln.

Mit dieser Funktion können Sie Variablen im Medienbefehl des responsiven Layouts deklarieren, sodass unterschiedliche Bildschirmbreiten unterschiedliche Variablenwerte haben.

body {
  --primary: #7F583F;
  --secondary: #F7EFD2;
}

a {
  color: var(--primary);
  text-decoration-color: var(--secondary);
}

@media screen and (min-width: 768px) {
  body {
    --primary:  #F7EFD2;
    --secondary: #7F583F;
  }
}

6. Kompatibilitätsverarbeitung

Für Browser, die keine CSS-Variablen unterstützen, können Sie die folgende Schreibmethode verwenden.

a {
  color: #7F583F;
  color: var(--primary);
}

kann auch mit dem Befehl @support erkannt werden.

@supports ( (--a: 0)) {
  /* supported */
}
@supports ( not (--a: 0)) {
  /* not supported */
}

7. JavaScript-Betrieb

JavaScript kann auch erkennen, ob der Browser CSS-Variablen unterstützt.

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

Die Art und Weise, JavaScript zu schreiben, um CSS-Variablen zu bedienen, ist wie folgt.

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

Das bedeutet, dass JavaScript beliebige Werte in Stylesheets speichern kann. Das Folgende ist ein Beispiel für das Abhören eines Ereignisses. Die Ereignisinformationen werden in einer CSS-Variablen gespeichert.

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

Informationen, die für CSS nicht nützlich sind, können auch in CSS-Variablen abgelegt werden.

--foo: if(x > 5) this.width = 10;

Im obigen Code ist der Wert von --foo eine ungültige Anweisung in CSS, kann aber von JavaScript gelesen werden. Das bedeutet, dass Sie Stileinstellungen in CSS-Variablen schreiben und diese von JavaScript lesen lassen können.

CSS-Variablen bieten also eine Möglichkeit für JavaScript, mit CSS zu kommunizieren.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von Variablen in CSS (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!