CSS-Variablenbeschreibung und Tutorial

CSS ist eine unverzichtbare Sprache für unsere Front-End-Entwicklung. Wenn wir sie gut verwenden können, gibt es in CSS immer keine Variablen. Sie können nur Precompiler wie SASS verwenden oder WENIGER. Im März dieses Jahres kündigte Microsoft an, dass der Edge-Browser CSS-Variablen unterstützen würde. 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 leistungsstark ist. In diesem Artikel lernen Sie einige Verwendungsmöglichkeiten von CSS-Variablen kennen.

1. Deklaration von Variablen

Fügen Sie beim Deklarieren einer Variablen zwei Bindestriche (--) vor dem Variablennamen hinzu.

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

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

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

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

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

Der zweite Parameter verarbeitet keine internen Kommas oder Leerzeichen und wird als Teil des Parameters betrachtet.

var(--font-stack, "Roboto", "Helvetica");var(--pad, 10px 15px 20px);
var()函数还可以用在变量的声明。
: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; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }</style><p>蓝色</p><div>绿色</div><div id="alert">红色</div>

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 der ü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);}

Sie können zur Erkennung auch den Befehl @support verwenden.

@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 */}

JavaScript verarbeitet CSS-Variablen 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.

Ich glaube, Sie haben viel über CSS-Variablen gelernt. Ich hoffe, dieses Tutorial kann Ihnen bei der Arbeit helfen.

Verwandte Tutorials:

Neues Wissen: CSS-Variable-Variable

Die erste CSS-Variable: currentColor_html/css_WEB-ITnose

CSS-Variable „trial_html/css_WEB-ITnose“

Das obige ist der detaillierte Inhalt vonCSS-Variablenbeschreibung und Tutorial. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!