Wie setze ich die SASS-Variable mit Javascript

Question

Ich möchte eine globale Variable in CSS mit Sass CSS setzen. Diese globale Variable muss mit Javascript festgelegt werden. Wie setze ich Variable mit Javascript oder einer anderen Methode Ich habe root css, aber es ist nicht für IE-Browser unterstützt. Es folgt mein css

$mainbgimage: image url; 
.page-title { 
padding: 0; 
min-height: 200px; 
background-image: $mainbgimage; 
} 

Answer 1

SCSS und dergleichen Sprachen vorverarbeitet. Sie enthalten Funktionen (wie Variablen), um die Entwicklung und Pflege Ihrer Stile zu erleichtern. Diese Funktionen werden jedoch nicht von Vanilla CSS unterstützt und Sie müssen den Präprozessor (SASS) ausführen, um das von den Browsern unterstützte CSS zu generieren.

Das resultierende CSS hat keine Variablen, daher können Sie sie nicht direkt mit clientseitigem JavaScript ändern.

Aber zum Glück haben Sie viele Möglichkeiten für dynamische Stile. Ich würde immer empfehlen, CSS-Klassen Makel wie so:

document.getElementById('elementId').classList.add('specialStyleClass'); 

/* ... */ 

document.getElementById('elementId').classList.remove('specialStyleClass'); 

können Sie sogar Element Stile direkt von javascript:

document.getElementById('elementId').style.color = 'red';