Einführung in die native Variable var in CSS/CSS3

Syntax verwenden

Schauen wir uns zunächst ein Beispiel an:
HTML-Code:

<p class="element">这是一段文字</p>

CSS-Code:

.element {
  width:200px;
  height:200px;
  --main-bg-color: #000;
  color:#fff;
  background-color: var(--main-bg-color);
}

Erzielen Sie den Effekt:

Das Ergebnis ist, dass der Hintergrund des DOM-Elements schwarz wird.

Die native Variablendefinitionssyntax in CSS lautet: --*, und die Variablenverwendungssyntax lautet: var(--*) , wobei * unseren Variablennamen darstellt. 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. Bei CSS-Variablen gibt es diese Einschränkungen jedoch nicht, beispielsweise:

:root{
    --main-bg-color: #000;
}.element {
    background-color: var(--main-bg-color);
}

Hinweis: Variablennamen dürfen keine Zeichen wie $，[，^，(，% enthalten. Gewöhnliche Zeichen sind auf „ 数字[0-9]" "字母[a-zA-Z]" "下划线_" und " 短横线-“ Diese Kombinationen können aber Chinesisch, Japanisch oder Koreanisch sein, zum Beispiel:

.element {
  width:200px;
  height:200px;
  --黑色: #000;
  color:#fff;
  background-color: var(--黑色);
}

Vollständige Syntax von CSS-Variablen: Die vollständige Syntax, die von CSS-Variablen verwendet wird, lautet:
var( [, ]? ), auf Chinesisch lautet sie: var( 63feee6f73d3cd1b7991b0ef3efed0af [, 9f4e497a979d41fdfaf5f6bcf2a7a4a5 Was ist die Hintergrundfarbe? <p></p> <ul class=" list-paddingleft-2"> <li>A. transparent<p></p> </li> <li>B 20px<p></p> </li> <li>C 🎜><p></p>D. #cd0000</li> <li> <p></p>Die Antwort lautet: </li> </ul> <p><strong><span style="color: #ff0000;"><code>A. transparent CSS-Variable, wenn Es wurde festgestellt, dass der Variablenwert unzulässig ist. Beispielsweise kann die Hintergrundfarbe oben offensichtlich nicht 20 Pixel betragen, daher wird stattdessen der Standardwert der Hintergrundfarbe verwendet, der der Standardwert ist. Daher entspricht das obige CSS:

Anwendung von CSS-Variablen in js

body {
    --color: 20px;
    background-color: #369;
    background-color: transparent;
}

Sehen Sie sich das folgende Beispiel an, HTML-Code:

CSS-Code:

<p id="jsDom">这是一段文字</p>

JS-Code:

#jsDom {
    --my-varwidth: 200px;
    background-color: #000;
    color:#fff;
    width:var(--my-varwidth);
    height:200px;
}

Was wenn der Stil zwischen Zeilen geschrieben wird? Gehen Sie dann wie folgt vor:

HTML-Code:

var element = document.getElementById('jsDom');var curWidth = getComputedStyle(element).getPropertyValue("--my-varwidth");
console.log(curWidth); //200px//设置过后该DOM元素的宽度变为了300pxelement.style.setProperty("--my-varwidth", '300px');

JS-Code:

<p id="jsDom" style="--my-varwidth:400px;width:var(--my-varwidth);">这是一段文字</p>

Browserkompatibilität

var element = document.getElementById('jsDom');var curWidth = element.style.getPropertyValue("--my-varwidth");
console.log(curWidth); //400px

Die Browserkompatibilität ist wie in der Abbildung dargestellt:

Derzeit unterstützt IE11 diese CSS-Variable nicht.

Trotzdem finde ich, dass diese CSS-Variable auch sehr leistungsfähig ist. Welcher ist Ihrer Meinung nach besser als der Präprozessor? Lassen Sie uns über die Nachteile von Präprozessoren sprechen.

Nachteile des Präprozessors

Präprozessorvariablen sind nicht live

Für Neulinge vielleicht überraschend, besteht die häufigste Einschränkung des Präprozessors darin, dass Sass nicht in Medien definiert werden kann, die Variablen in der Abfrage definieren oder verwenden @verlängern.

Der obige Code wird kompiliert in:

$gutter: 1em;
@media (min-width: 30em) {
     $gutter: 2em; 
} 
 .Container { 
     padding: $gutter; 
 }

Wie aus dem ersichtlich ist obige Ergebnisse, Medienanfragen. Blöcke werden verworfen und Variablenzuweisungen werden ignoriert.

.Container { 
     padding: 1em;
 }

Da es keine Möglichkeit gibt, Variablen auf der Grundlage übereinstimmender @media-Regeln zu ändern, besteht die einzige Möglichkeit darin, jeder Medienabfrage eine eindeutige Variable zuzuweisen und jede Variation einzeln zu schreiben.

Präprozessorvariablen können nicht kaskadiert werden

Bei der Verwendung von Variablen treten unweigerlich Probleme mit dem Gültigkeitsbereich auf. Sollte diese Variable als globale Variable festgelegt werden? Sollte es auf Dateien oder Module beschränkt sein? Sollte es auf Blöcke beschränkt werden?

Da der ultimative Zweck von CSS darin besteht, Stile zu HTML hinzuzufügen, gibt es eine weitere effektive Möglichkeit, Variablen zu definieren: DOM-Elemente. Da die Präprozessoren aber nicht im Browser laufen und das Markup nicht sehen können, ist ihnen das nicht möglich.

Angenommen, es gibt eine Website. Für Benutzer, die größeren Text bevorzugen, fügen Sie die Klasse

100db36a723c770d327fc0aef2ce13b1

hinzu Element. >. Wenn diese Klasse festgelegt ist, sollten größere $font-Size-Variablenzuweisungen angewendet werden: user-setting-large-text

$font-size: 1em;
.user-setting-large-text {
    $font-size: 1.5em;
} body { 
    font-size: $font-size; 
}

但同样，就像上面的媒体块示例，Sass完全忽略了该变量的赋值，这意味着这是不可能发生的。编译后的代码如下：

body { 
    font-size: 1em;
}

预处理器变量不继承

虽然继承严格说来是级联的一部分，之所以把它单独分出来讲，是因为多次想调用这个特性却不得。

假设一种情况，要在DOM元素上基于其父元素应用的颜色而设置样式：

.alert {
    background-color: lightyellow;
}.alert.info {
    background-color: lightblue;
}.alert.error {
    background-color: orangered;
}.alert button {
    border-color: darken(background-color, 25%);
}

上面的代码并不是有效的Sass（或CSS），但你应该明白它想达到什么目的。

最后一句声明试图在bb9345e55eb71822850ff156dfde57c8元素从父元素.alert元素继承的background-color属性使用Sass的darken函数。如果类info 或error已经加在了.alert上（或如果background-color已通过JavaScript或用户样式设置），button元素能据此作出相应的响应。

显然这在Sass中行不通，因为预处理器不知道DOM结构，但希望你清楚的认识到为什么这类东西是有用的。

调用一个特定的用例：出于可访问性的原因，在继承了DOM属性上运行颜色函数是极其方便的。例如，确保文本始终可读，并充分与背景颜色形成鲜明对比。 有了自定义属性和新的CSS颜色函数，很快这将成为可能。

预处理器变量不可互操作

这是预处理器相对明显的一个缺点，提到它是因为我觉得它重要。如果你正使用PostCSS来构建网站，想使用只能通过Sass实现主题化的第三方组件，那你真是不走运了。

跨不同的工具集或CDN上托管的第三方样式表共享预处理器变量是不可能（或至少不容易）的。

原生的CSS自定义属性可以与任何CSS预处理器或纯CSS文件一起使用。反之则不然。

下面给一个css变量在媒体查询中的使用：

:root {
    --gutter: 1.5em;
}@media (min-width: 30em) {
    :root {
        --gutter: 2em;
    }}
@media (min-width: 48em) {
    :root {
        --gutter: 3em;
    }}

如果是预处理器这样写就无效了。

Das obige ist der detaillierte Inhalt vonEinführung in die native Variable var in CSS/CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!