Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

一个新手
Freigeben: 2017-10-26 09:33:51
Original
2626 Leute haben es durchsucht

Syntax verwenden

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


<p class="element">这是一段文字</p>
Nach dem Login kopieren

CSS-Code:


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

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);
}
Nach dem Login kopieren

Hinweis: Variablennamen dürfen keine Zeichen wie $,[,^,(,% enthalten. Gewöhnliche Zeichen sind auf „<🎜“ beschränkt > 数字[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(--黑色);
}
Nach dem Login kopieren

Vollständige Syntax von CSS-Variablen: Die vollständige Syntax, die von CSS-Variablen verwendet wird, lautet:
var( [, ]? ), auf Chinesisch lautet sie: var( <自定义属性名> [, <默认值 ]? ), das heißt, wenn wir keinen Variablennamen definieren, wird der folgende Wert als Standardattributwert verwendet. ist wie folgt:


.element {
    background-color: var(--new-bg-color,#EE0000);
}
Nach dem Login kopieren
Das erhaltene Ergebnis ist natürlich der Hintergrund des Werts der folgenden Farbe.

Sehen wir uns an, was passiert, wenn der Variablenname unzulässig ist. Schauen Sie sich das folgende Beispiel an:


body {
  --color: 20px;
  background-color: #369;
  background-color: var(--color, #cd0000);
}
Nach dem Login kopieren
Entschuldigung Zeit Was ist die Hintergrundfarbe?

  • A. transparent

  • B 20px

  • C 🎜>

    D. #cd0000
  • Die Antwort lautet:

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;
}
Nach dem Login kopieren
Sehen Sie sich das folgende Beispiel an, HTML-Code:


CSS-Code:

<p id="jsDom">这是一段文字</p>
Nach dem Login kopieren


JS-Code:

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


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

HTML-Code:
var element = document.getElementById(&#39;jsDom&#39;);var curWidth = getComputedStyle(element).getPropertyValue("--my-varwidth");
console.log(curWidth); //200px//设置过后该DOM元素的宽度变为了300pxelement.style.setProperty("--my-varwidth", &#39;300px&#39;);
Nach dem Login kopieren



JS-Code:

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


Browserkompatibilität

var element = document.getElementById(&#39;jsDom&#39;);var curWidth = element.style.getPropertyValue("--my-varwidth");
console.log(curWidth); //400px
Nach dem Login kopieren
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; 
 }
Nach dem Login kopieren


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

.Container { 
     padding: 1em;
 }
Nach dem Login kopieren
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

<🎜 zu <html> 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; 
}
Nach dem Login kopieren

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


body { 
    font-size: 1em;
}
Nach dem Login kopieren

预处理器变量不继承

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

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


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

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

最后一句声明试图在

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage