Die Funktion var() in CSS bietet Funktionen zum Speichern und Verwenden von Variablen, weist Variablen Werte zu und verwendet sie im gesamten Stylesheet. Verwendung: 1. Verwenden Sie das Präfix --, um die Variable (--
: ) zu deklarieren. 2. Verwenden Sie die Funktion var(), um den Variablenwert (var(-- ) zu erhalten ;) ). Verwenden Sie var() für Wiederverwendbarkeit, Konsistenz und einfache Wartung sowie zum Erstellen von Werten, die basierend auf Medienabfragen oder JavaScript-Variablen angepasst werden.
Was ist var in CSS?
Mit der Funktion var()
in CSS können Sie Variablen speichern und verwenden. Damit können Sie einer Variablen einen Wert zuweisen und diese Variable dann im gesamten Stylesheet wiederverwenden. var()
函数允许你存储和使用变量。它让你可以将值分配给变量,然后在整个样式表中重复使用该变量。
如何使用 var
要使用 var()
,请按照以下步骤操作:
--
前缀声明一个 CSS 变量。语法为:--<变量名>: <值>;
var()
函数来获取变量的值。语法为:var(--<变量名>);
示例
例如,以下代码声明了一个名为 --primary-color
的变量,并将其设置为蓝色:
<code class="css">:root { --primary-color: blue; }</code>
然后,你可以在样式表的其他部分使用此变量:
<code class="css">.heading { color: var(--primary-color); }</code>
优点
使用 CSS 变量有很多优点,包括:
var()
函数来创建动态值,例如根据媒体查询或 JavaScript 变量调整大小或颜色。注意
var(--var-1)
。var()
函数不支持计算表达式,例如 var(--var-1 + var(--var-2))
var()
zu verwenden, befolgen Sie bitte diese Schritte: 🎜--
Deklaration Eine CSS-Variable. Die Syntax lautet: --<Variablenname>: <Wert>;
🎜var()
, um den Wert der zu erhalten Variable. Die Syntax lautet: var(--<Variablenname>);
🎜--primary- Farbe
und setzen Sie sie auf Blau: 🎜rrreee🎜 Sie können diese Variable dann in anderen Teilen Ihres Stylesheets verwenden: 🎜rrreee🎜🎜 Vorteile 🎜🎜🎜 Die Verwendung von CSS-Variablen bietet viele Vorteile, darunter: 🎜 var()
können Sie dynamische Werte erstellen, z. B. Größenänderung oder Farbgebung basierend auf Medienabfragen oder JavaScript-Variablen. 🎜🎜🎜🎜Hinweis🎜🎜var(--var-1)
verwenden. 🎜var()
unterstützt keine Berechnungsausdrücke wie var(--var-1 + var(--var-2))
. 🎜🎜Das obige ist der detaillierte Inhalt vonWas bedeutet var in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!