Detaillierte Erläuterung der Verwendung von var () von CSS3 zum Ändern von SCSS-Variablenwerten zur Laufzeit

var() Einführung und Verwendung

Details (MDN) IE ist ungültig, andere gängige Browser sind gültig

var()-Verwendung

Kann nur in {} deklariert werden, der Gültigkeitsbereich wird durch den Selektor von {} bestimmt

<!-- Haftungsausschluss-->
Körper{
  --name:value; //Gültig im Text}


<!-- Verwendung -->
.prüfen{
  attr: var(--name,defaultValue) //Wenn --name nicht existiert, verwende defaultValue
  
  var(--name):#369;//Falsche Verwendung}

Die native Syntax zur Variablendefinition in CSS lautet: –*, und die Syntax zur Variablenverwendung lautet: var(–*), wobei * unseren Variablennamen darstellt.

Es darf jedoch keine Zeichen wie $, [, ^, (, %, usw. enthalten. Gewöhnliche Zeichen sind auf die Kombination aus „Zahlen [0-9]“, „Buchstaben [a-zA-Z]“, „Unterstrich _“ und „Bindestrich -“ beschränkt, es kann jedoch chinesischer, japanischer oder koreanischer Art sein.

Ändern von SCSS-Variablenwerten zur Laufzeit

Diese Methode ändert den Wert der SCSSSS-Variable nicht direkt, kann aber denselben Effekt erzielen. Es ist effektiver und prägnanter, wenn eine Variable mehrere Attribute steuert. Es ist nicht notwendig, eine einzelne Variable zu verwenden, um ein einzelnes Attribut zu steuern. Diese Methode dient lediglich zum Ändern des Stilattributs. Eins-zu-eins ist dasselbe wie das Schreiben des Attributs im Stil.

Prinzip (Englisch)

Einfach ausgedrückt werden die SCSS-Variablen durch CSS-Variablen gesteuert

$farben: (
  primär: #FFBB00,
  sekundär: #0969A2
);

Selektor1{
  @each $name, $farbe in $farben {
    --Farbe-#{$name}: $Farbe;
  }
}

<!-- Generierungseffekt von Selector1-->
:Wurzel {
  --Farbe-Primär: #FFBB00;
  --Farbe-Sekundär: #0969A2;
}


<!-- Verwendungsmethode 1: CSS-Variablen direkt verwenden -->
Wähler{
  Farbe: var(--color-primary);
}

<!-- Verwendung 2 verwendet SCSS-Funktionen, um den SCSS-Syntaxempfehlungen zu entsprechen -->  
@Funktion Farbe($Farbname) {
  @return var(--color-#{$color-name});
}

Körper { 
  Farbe: Farbe (primär); //Verwenden}

<!-- Körpergenerierungseffekt -->
Körper { 
  Farbe: var(--color-primary); //Dies kann von js festgelegt werden}

js setzt CSS-Variablen, d. h. setzt und führt SCSS-Variablen aus

domObject.style.setProperty(name,value); //Name ist der Name der CSS-Variable, zB: --color-primary

Bisher wurde die Laufzeitänderung der Variablenwerte in SCSS abgeschlossen. Ich bin mir über das spezifische Anwendungsszenario nicht sicher, aber ich bin darauf gestoßen.

Mein Anwendungsszenario:

Benutzerdefinierte Komponenten müssen einige Stileigenschaften offenlegen, damit Benutzer sie frei anpassen können, ähnlich wie Designs, aber ich möchte keine Zeichenfolgenverkettung verwenden, um sie abzuschließen, was zu verschwenderisch ist. Jedes Mal, wenn ein Wert geändert wird, muss der gesamte Stil neu geschrieben werden, und dies erfordert häufige Änderungen am DOM, was nicht mit der Idee von Vue übereinstimmt, und es ist zu umständlich, direkt in CSS zu schreiben.

Ich verwende also SCSS, um Stile zu schreiben. Die Verschachtelung von SCSS ist wirklich einfach zu verwenden. LESS unterstützt keine verschachtelten Attribute, was sehr unbequem zu verwenden und nicht so prägnant wie SCSS ist.
Da scss vorkompiliert ist, kann der Variablenwert zur Laufzeit nicht geändert werden und ich muss ihn ändern. Deshalb habe ich bei Google eine zufriedenstellende Lösung gefunden -> Prinzip (Englisch)

Besondere Aufmerksamkeit

Wenn Sie „scoped“ in einer einzelnen Dateikomponente (.vue) verwenden, sind die Effekte von Selektoren wie :root und :body nicht wie erwartet.

[data-v-1374924e]:Wurzel {
  --Test: 100px;
}

In diesem Fall kann die Variable -test überhaupt nicht gefunden werden, da keine Wurzel vorhanden ist. Das Scoped-Feature der Vue-Komponente ist nur in dieser Komponente gültig, aber die Komponente hat kein vollständiges Dokument, d. h. es gibt keine Wurzel innerhalb der Komponente.

Berücksichtigen Sie daher in der Vue-Datei sorgfältig den Selektorbereich der CSS-Variablendeklaration, um ungültige Variablen zu vermeiden

Damit ist dieser Artikel über die Verwendung von var() in CSS3 zum Ändern von SCSS-Variablenwerten zur Laufzeit abgeschlossen. Weitere Informationen zum Ändern von SCSS-Variablenwerten mit CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!