Wobei uns CSS-Variablen helfen können
In einigen imperativen Programmiersprachen wie Java, C++ oder JavaScript können wir bestimmte Zustände durch Variablen verfolgen. Eine Variable ist ein Symbol, das einem bestimmten Wert zugeordnet ist, und der Wert der Variablen kann sich im Laufe der Zeit ändern.
In einer deklarativen Sprache wie CSS gibt es keine Werte, die sich im Laufe der Zeit ändern, und es gibt kein Konzept für Variablen.
CSS führt das Konzept hierarchischer Variablen ein, um Herausforderungen bei der Wartbarkeit zu bewältigen. Dadurch kann eine Variable im gesamten CSS-Baum symbolisch referenziert werden
1. Was ist eine CSS-Variable
CSS-Variablen haben derzeit zwei Formen:
Variable , das heißt , mit rechtlichen Bezeichnern und rechtlichen Werten. Überall einsetzbar. Variablen können mit der Funktion var() verwendet werden. Beispiel: var(--example-variable) gibt den Wert zurück, der dem benutzerdefinierten Attribut --example-variable
entspricht. Diese Eigenschaften verwenden das spezielle Format --where als Namen. Zum Beispiel --example-variable: 20px; sogar eine CSS-Deklarationsanweisung. Das bedeutet, dass der Variable --example-varibale 20 Pixel zugewiesen werden
2. Deklaration von Variablen
Benennung von Variablen
Die Variablendeklaration verwendet zwei Konjunktionslinien – zur Darstellung von Variablen, $ color ist eine Syntax, die zu Sass gehört, und @color ist eine Syntax, die zu Less gehört. Um Konflikte mit nativen CSS-Variablen zu vermeiden, verwenden Sie --)
Hinweis: Bei Variablennamen muss die Groß-/Kleinschreibung beachtet werden, --header-color und --Header-Color sind zwei verschiedene Variablen
Deklarationsmethoden
Die Art und Weise, CSS-Variablen zu deklarieren, ist sehr einfach. Wie folgt wird eine CSS-Variable mit dem Namen color deklariert.
Schreiben Sie in die CSS-Datei
Schreiben Sie im Inline-Stil des HTML-Tags
Verwenden Sie JS, um ein Element mit der Methode .style.setProperty zu deklarieren
body{
--color: red;
}
<body style="--color: red;"></body>
document.getElementsByTagName('body')[0].style.setProperty('--color', 'red')Nach dem Login kopieren
Typ des Variablenwerts
Wenn der Variablenwert eine Zeichenfolge ist, kann er gespleißt werden mit anderen Zeichenfolgen
--bar: 'hello';
--foo: var(--bar)' world';
body:after {
content: '--screen-category : 'var(--screen-category);
}Nach dem Login kopieren
Wenn der Variablenwert ein numerischer Wert ist, kann er nicht direkt mit der numerischen Einheit verwendet werden. Sie müssen die Funktion calc() verwenden, um sie zu verbinden
.foo {
--gap: 20;
/* 无效 */
margin-top: var(--gap)px;
}
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}Nach dem Login kopieren
Wenn der Der Variablenwert hat eine Einheit und kann nicht als Zeichenfolge geschrieben werden
/* 无效 */
.foo {
--foo: '20px';
font-size: var(--foo);
}
/* 有效 */
.foo {
--foo: 20px;
font-size: var(--foo);Nach dem Login kopieren
Hinweis: Der Variablenwert kann nur als Attributwert verwendet werden, nicht als Attributname
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}Nach dem Login kopieren
Im obigen Code Als Attributname wird die Variable --side verwendet, die ungültig ist
3. Vererbung und Umfang von CSS-Variablen
Benutzerdefinierte Eigenschaften unterstützen auch die Vererbung. Wenn für ein Element kein benutzerdefiniertes Attribut definiert ist, wird der Wert des benutzerdefinierten Attributs von seinem übergeordneten Element geerbt.
class="one">
<p class="two">
<p class="three">
</p>
<p class="four">
</p>
<p>
</p>Nach dem Login kopieren
definiert das folgende CSS:
.two { --test: 10px; }
.three { --test: 2em; }Nach dem Login kopieren
In diesem Beispiel ist var( --test) Das Ergebnis ist:
class="two" entsprechender Knoten: 10px
class="two" entsprechender Knoten: Element : 2em
class="four" entsprechender Knoten: 10px (geerbt von seinem übergeordneten Element)
class="one" entsprechender Knoten: ungültig Wert, das heißt, der Attributwert ist der Standardwert, der nicht durch benutzerdefinierte CSS-Variablen überschrieben wurde
Der Bereich der obersten Ebene ist: root
4. Responsiv
p {
--color: #7F583F;
--bg: #F7EFD2;
}
.mediabox {
color: var(--color);
background: var(--bg);
}
@media screen and (min-width: 768px) {
body {
--color: #F7EFD2;
--bg: #7F583F;
}
}Nach dem Login kopieren
5. Unterschiede zum Präprozessor
1. Präprozessorvariablen sind nicht in Echtzeit
$color:#7F583F;
@media screen and (min-width: 768px) {
$color: #F7EFD2;
}
.mediabox {
background: $color;
}Nach dem Login kopieren
Kompilierungsergebnisse
.mediabox {
background: #7F583F;
}Nach dem Login kopieren
2
$zcolor:blue;
.ulbox {
$zcolor:red;
}
ul{
color: $zcolor;
}Nach dem Login kopieren
wird zu
ul {
color: blue;
}Nach dem Login kopieren
kompiliert. 3. Präprozessorvariablen sind nicht interoperabel.
Benutzerdefinierte native CSS-Eigenschaften können mit jedem CSS-Präprozessor oder einer reinen CSS-Datei verwendet werden. Zusammen verwenden
6. JS-Operationsvariablen
CSS-Variablen können mit JS interagieren
:root{
--testMargin:70px;
}
// 读取
var root = getComputedStyle(document.documentElement);
var cssVariable1 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable1); // '70px'
// 写入
document.documentElement.style.setProperty('--testMargin', '100px');
var cssVariable2 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable2); // '100px'
// 删除
document.documentElement.style.removeProperty('--testMargin');
var cssVariable3 = root.getPropertyValue('--testMargin').trim();
console.log(cssVariable3); // '70px'Nach dem Login kopieren
7. Kompatibilität
Überprüfen Sie, ob der Browser die automatische CSS-Attributdefinition unterstützt
/*css*/
@supports ( (--a: 0)) {
/* supported */
}
@supports ( not (--a: 0)) {
/* not supported */
}
// Js
if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
alert('CSS properties are supported');
} else {
alert('CSS properties are NOT supported');
}Nach dem Login kopieren
Zusammenfassung
Im Vergleich zu herkömmlichen Präprozessorvariablen wie LESS und SASS sind die Vorteile von CSS-Variablen:
Die dynamische Natur von CSS-Variablen kann sein geändert, wenn die Seite ausgeführt wird, während herkömmliche Präprozessorvariablen nach der Kompilierung nicht geändert werden können
-
CSS-Variablen können geerbt, in Kombination verwendet werden und einen Gültigkeitsbereich haben
-
Mit Javascript können Sie problemlos von JS lesen/schreiben
Das obige ist der detaillierte Inhalt vonWas sind CSS-Variablen? Lernen Sie CSS-Variablen kennen: Vererbung und Umfang von CSS-Variablen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
