So verwenden Sie CSS-Variablen in JS

So verwenden Sie CSS-Variablen in JS

Verwenden Sie das Schlüsselwort :export, um ein JS-Objekt in eine Less/SCSS-Datei zu exportieren.

$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;

// $menuBg:#304156;
$menuBg:#304156;
$menuHover:#263445;

$subMenuBg:#1f2d3d;
$subMenuHover:#001528;

$backWhite:#ffffff;

$Seitenleistenbreite: 210px;

:exportieren {
  MenüText: $menuText;
  MenüAktivText: $menuActiveText;
  Aktiver Untermenütext: $aktiver Untermenütext;
  MenüBg: $menuBg;
  MenüHover: $menuHover;
  UntermenüBg: $UntermenüBg;
  UntermenüHover: $UntermenüHover;
  Seitenleistenbreite: $Seitenleistenbreite;
  zurückWeiß: $zurückWeiß;
}

Verweisen Sie in der erforderlichen JS-Datei oder dem erforderlichen JS-Modul darauf.

Stil aus „index.scss“ importieren
Konsole.log(Stil.MenüText)

VUE-Datei

Stil aus „index.scss“ importieren
Standard exportieren {
    berechnet:{
        Stil(){
            Rückgabestil
        }
    }
}

Umsetzungsprinzip

Webpack: Kombinieren Sie mit CSS-Loader, um CSS-Module in Ihrem Projekt zu aktivieren.

CSS-Module: CSS-Module verwenden intern ICSS, um die Probleme beim Importieren und Exportieren von Stilen zu lösen. Sie entsprechen den beiden neu hinzugefügten Pseudoklassen: :import und :export.

Anhang: JavaScript-Schlüsselwort exportieren

Javascript-Schlüsselwörter (Reservierte Wörter) beziehen sich auf Wörter, die in der Javascript-Sprache eine bestimmte Bedeutung haben und Teil der Javascript-Syntax werden. Javascript-Schlüsselwörter können nicht als Variablennamen oder Funktionsnamen verwendet werden. Die Verwendung von Javascript-Schlüsselwörtern als Variablennamen oder Funktionsnamen führt beim Javascript-Ladevorgang zu Kompilierungsfehlern.

Liste der Javascript-Schlüsselwörter:

unterbrechen, löschen, Funktion, zurückgeben, typeof
Fall, tun, wenn, wechseln, var
fangen, sonst, in, dies, ungültig
fortfahren, falsch, Instanz von, werfen, während
Debugger, endlich, neu, wahr, mit
Standard, für, null, versuchen

Liste zukünftiger Javascript-Schlüsselwörter:

abstrakt, doppelt, gehe zu, nativ, statisch
Boolesch, Aufzählung, Implementierungen, Paket, Super
Byte, Export, Import, privat, synchronisiert
char, erweitert, int, geschützt, wirft
Klasse, endgültig, Schnittstelle, öffentlich, vorübergehend
Konstante, Float, lang, kurz, flüchtig

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von CSS-Variablen in JS. Weitere relevante Inhalte zur Verwendung von CSS-Variablen in JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!