Aufruf Sass Funktion von jquery

Question

Früher war meine Frage: -

Ich habe den folgenden Code in meinem Sass

Datei

.random { 
    box-sizing: content-box; 
    text-align: center; 
    line-height: 1; 

    &:before { 
     display: inline-block; 
     margin-right: 0.2em; 
     width: 0; 
     height: 0; 
     border-right: 0.4em solid transparent; 
     border-left: 0.4em solid transparent; 
     content: ""; 
     vertical-align: baseline; 
    } 
} 

.perc-neg:before { 
    border-top: 0.5em solid #FCB062; 
} 

.perc-neg.good:before { 
    border-top: 0.5em solid #98F1AC; 
} 

Ich habe ein div mit class = "random perc-neg gut"

Jetzt möchte ich den Stil der oben genannten div ändern. wie es geht?

Ich habe versucht, in der Konsole folgende aber es gibt leere Objekt

$("random perc-neg good:before").css("color","red"); 
$("random.perc-neg.good:before").css("color","red"); 
$(".random.perc-neg.good:before").css("color","red"); 

Jemand seine eine mögliche doppelte vorgeschlagen hat, aber es ist nicht.

In der verwandten Frage, der Benutzer wollte es nur sichtbar oder versteckt machen, so dass zwei Klassen ausreichen werden.

Aber meine Anforderung ist es, die Farbe nach Wahl des Benutzers zu ändern, die er aus einer breiten Palette von Farben auswählen kann.

Es ist definitiv unmöglich, eine Klasse mit jeder Änderung der Farbe zu definieren.

Und wir können auch einige Variablen nicht an CSS übergeben, um die Farbeigenschaften entsprechend zu ändern.

Frage aktualisiert:

ich jetzt Sass bin mit. Ich habe eine Funktion zur Aktualisierung Die Farbe

@function em($color) { 
    @return border-bottom: 0.5em solid $color; 
} 

.perc-neg.good:before { 
    em(#98F1AC); 
} 

definitiv definiert sind, die Funktion aus der Datei Sass aufrufen können, sondern wie es von Javascript nennen

Jetzt möchte ich die Hex-Code der Farbe, um von

Javascript

ich brauche von Javascript, um so etwas passieren

.perc-neg.good:before(#98F1AC) 

für das gleiche in google sah nicht anythin finden g relevant Anstatt es als doppelte Kennzeichnung, wäre es viel besser, wenn Sie

Answer 1

Ändern der Stil der pseudo Elemente sind eine Lösung bieten können nicht möglich, weil :after und :before technisch nicht Teil des DOM sind. Sie müssen eine Arbeit finden oder zusätzliche Klassen verwenden, um dies zu erreichen.

Answer 2

Sie können weniger Bibliothek verwenden, mit der Sie CSS zur Laufzeit rendern können hier ist ein reference.

#Updated Antwort

Sie können versuchen, so etwas wie dies zu tun:

less.modifyVars({ 
    '@BorderColor': '#5B83AD' 
});