Heim > Artikel > Web-Frontend > 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.
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.
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(--深蓝); }
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; }
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); }
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 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 */ }
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
rrreeIm 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!