Come controllare Sass Variable con javascript

Question

Ho un file Sass che sta generando un file CSS. Ho usato molte variabili nel mio file sass per il colore di sfondo, la dimensione del carattere, ora voglio controllare tutte le mie variabili attraverso JavaScript.

Per esempio, in style.sass abbiamo

$bg : #000; 
$font-size: 12px; 

Come posso cambiare questi valori da JavaScript?

Answer 1

Non è possibile. SASS è un preprocessore CSS, il che significa che tutte le informazioni specifiche SASS scompaiono quando lo si compila in CSS.

Answer 2

JavaScript viene eseguito sul lato client (nel browser Web), mentre Sass viene generato lato server, quindi è necessario trovare un modo per colmare il divario. Un modo per farlo sarebbe quello di impostare un ascolto in stile AJAX per inviare eventi JavaScript sul tuo server, e quindi fare in modo che il server modifichi e ricompili il tuo file style.sass.

Answer 3

Se si desidera eseguire il bootstrap (ad esempio, modificare i campi per scaricare un tema).

dovreste:

1. avere i file a portata di mano che si desidera modificare
2. Conservare queste variabili come una stringa, e utilizzare .replace() per cercare e sostituire le variabili
3. uscita questa stringa e compilarlo in un file o comprarlo per scaricarlo.

Lo farei personalmente con php.

Answer 4

Condividi dati tra Sass e JavaScript utilizzando JSON.

vedere la domanda relativa https://stackoverflow.com/a/26507880/4127132

Answer 5

Ho anche bisogno di questa funzionalità, ecco cosa ha funzionato per me:

Con JS è possibile impostare una classe al corpo, es. .blue o .default Creare ora una serie di regole per estendere da, che si desidera impostare:

.default .themeColor { 
    color: 'red'; 
} 
.blue .themeColor { 
    color: 'blue'; 
} 

Ora, invece di avere color: $someColor nel file SCSS, usare in questo modo:

.someClass { 
    @extend .themeColor; 
} 

Ora, se il tuo corpo avrà la classe default, il colore all'interno di someClass sarà rosso e se il corpo avrà la classe blue il colore sarà blu.