Heim > Artikel > Web-Frontend > Was sind CSS-Variablen? Lernen Sie CSS-Variablen kennen: Vererbung und Umfang von CSS-Variablen

Was sind CSS-Variablen? Lernen Sie CSS-Variablen kennen: Vererbung und Umfang von CSS-Variablen

php是最好的语言Original: 2018-07-30 14:30:011860Durchsuche

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(&#39;body&#39;)[0].style.setProperty(&#39;--color&#39;, &#39;red&#39;)

Typ des Variablenwerts

Wenn der Variablenwert eine Zeichenfolge ist, kann er gespleißt werden mit anderen Zeichenfolgen

--bar: &#39;hello&#39;;
--foo: var(--bar)&#39; world&#39;;


body:after {
  content: &#39;--screen-category : &#39;var(--screen-category);
}

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

Wenn der Der Variablenwert hat eine Einheit und kann nicht als Zeichenfolge geschrieben werden

/* 无效 */
.foo {
  --foo: &#39;20px&#39;;
  font-size: var(--foo);
}

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

Hinweis: Der Variablenwert kann nur als Attributwert verwendet werden, nicht als Attributname

.foo {
  --side: margin-top;
  /* 无效 */
  var(--side): 20px;
}

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>

definiert das folgende CSS:

.two { --test: 10px; }
.three { --test: 2em; }

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;
  }
}

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;
}

Kompilierungsergebnisse

.mediabox {
  background: #7F583F; 
}

$zcolor:blue;
.ulbox {
    $zcolor:red;
}
ul{
    color: $zcolor;
}

wird zu

ul {
  color: blue; 
}

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(&#39;--testMargin&#39;).trim();
console.log(cssVariable1); // &#39;70px&#39;
 
// 写入
document.documentElement.style.setProperty(&#39;--testMargin&#39;, &#39;100px&#39;);
var cssVariable2 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable2);  // &#39;100px&#39;

// 删除
document.documentElement.style.removeProperty(&#39;--testMargin&#39;);
var cssVariable3 = root.getPropertyValue(&#39;--testMargin&#39;).trim();
console.log(cssVariable3); // &#39;70px&#39;

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(&#39;--a&#39;, 0)) {
    alert(&#39;CSS properties are supported&#39;);
} else {
    alert(&#39;CSS properties are NOT supported&#39;);
}

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

Verwandte Artikel:

Lernen von PHP - - Variable Variablen, -- Variable Variablen

PHP-Lernprotokoll – Variablenbereich, Variablen

Verwandte Videos:

Geek Academy CSS- und CSS3-Video-Tutorials

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Videodemonstration: Wie erstelle ich mit CSS einen realistischen Saturn? (mit Code)Nächster Artikel：Videodemonstration: Wie erstelle ich mit CSS einen realistischen Saturn? (mit Code)

In Verbindung stehende Artikel

Mehr sehen