Vertieftes Verständnis von CSS-Variablen (organisierte Zusammenfassung)

Dieser Artikel vermittelt Ihnen relevantes Wissen über CSS-Variablen und unterstützt nach und nach Verschachtelungen, Variablen und Funktionsfunktionen.

Jeder, der Sass oder Less verwendet hat, weiß, dass sie hauptsächlich über Verschachtelungs-, Variablen- und Funktionsfunktionen verfügen können. Tatsächlich hat natives CSS begonnen, es nach und nach zu unterstützen. Es ist wahr, dass nur Sie und ich damit vertraut sind Wenn Sie CSS-Variablen verstehen, werden Sie feststellen, dass CSS von nun an äußerst leistungsfähig ist.

Variablendeklaration

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

// 局部声明
body {
  --foo: #ed145b;
  --bar: #F7EFD2;
}
// 全局声明
:root{
  --foo: #ed145b;
  --bar: #F7EFD2;
}

Zum Beispiel haben wir oben zwei Variablen deklariert: --foo und --bar In Sie müssen lediglich als benutzerdefinierte CSS-Eigenschaften verstanden werden. Sie unterscheiden sich nicht von formalen Eigenschaften wie Farbe und Schriftgröße, haben jedoch keine Standardbedeutung. Beachten Sie, dass bei CSS-Variablennamen die Groß- und Kleinschreibung beachtet werden muss wir schreiben ist nicht.

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.

Namenskonvention

In Bezug auf die Benennung gibt es in verschiedenen Sprachen einige Hinweise. Beispielsweise können CSS-Selektoren nicht mit einer Zahl beginnen und Variablen in JS können nicht direkt numerisch sein. In CSS-Variablen gibt es diese Einschränkungen jedoch nicht , wie zum Beispiel:

:root {
  --1: #369;
}
body {
  background-color: var(--1);
}

darf keine Zeichen wie $, [, ^, (, %, usw.) enthalten. Gewöhnliche Zeichen sind auf „Zahlen [0-9]“, „Buchstaben [a-zA-Z]“, „ underscore_“ und „dash“ Line –“ diese Kombinationen, können aber Chinesisch, Japanisch oder Koreanisch sein, zum Beispiel:

body {
  --深蓝: #369;
  background-color: var(--深蓝);
}

var() function

Nach der Deklaration der Variablen möchten wir diese natürlich abrufen und verwenden, dann die Variable Die Funktion () wird zum Lesen des zweiten Parameters der Variablen

p {
  color: var(--foo);
  border::1px solid var(--bar);
}

var()

color: var(--foo, #ED145B); //第二个参数就是默认值，假设--foo为空情况下，会使用#ED145B

var() verwendet. Die Funktion kann auch in der Variablendeklaration verwendet werden

:root {
  --primary-color: red;
  --logo-text: var(--primary-color); // 上面刚声明，这里就可以使用
}

Variablenwerte können nur als Attributwerte verwendet werden, nicht Attributnamen

.foo {
  --side: margin-top;
  /* 很显然，下面是无效的 */
  var(--side): 20px;
}

Variablenwerttyp

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

--bar: 'hello';
--foo: var(--bar)' world';
// 示例
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;
 /* 通过calc去计算，下面有效 */
  margin-top: calc(var(--gap) * 1px);
}

If Der Variablenwert hat eine Einheit und kann nicht als Zeichenfolge geschrieben werden "Regel von CSS.

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

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

Kompatibilitätsverarbeitung

Für Browser, die nicht unterstützt werden, können Sie die folgende Schreibmethode verwenden:

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

JavaScript-Operation (Essenz).

JavaScript Sie können auch erkennen, ob der Browser CSS-Variablen unterstützt

a {
  color: #7F583F;
  color: var(--primary); // 应该很好理解，如果这里读不出值，那么并不会覆盖上面的color
}

JavaScript-Operation CSS-Variablen-Schreibmethode Wie unten gezeigt

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

Dies bedeutet, dass JavaScript jeden Wert im Stylesheet speichern kann. Unten finden Sie ein Beispiel für das Abhören eines Ereignisses , und die Ereignisinformationen werden in einer CSS-Variablen gespeichert

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);
if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

Das bedeutet, dass JavaScript jeden Wert im Stylesheet speichern kann. Das Folgende ist ein Beispiel für die Überwachung von Ereignissen. Die Ereignisinformationen werden in CSS-Variablen gespeichert Für CSS unbrauchbar, kann auch in CSS-Variablen eingefügt werden

rrree

Im obigen Code ist der Wert von --foo eine ungültige Anweisung in CSS, kann aber von JavaScript gelesen werden. Dies bedeutet, dass Stileinstellungen in CSS-Variablen geschrieben werden können und von JavaScript gelesen. Daher bieten CSS-Variablen eine Möglichkeit für JavaScript, mit CSS zu kommunizieren Verbindung zwischen CSS und JS

Es hindert Sie nicht daran, Sass/Less zu verwenden, es kann kombiniert und verwendet werden

(Lernvideo-Sharing:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonVertieftes Verständnis von CSS-Variablen (organisierte Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!