Jak kontrolować zmienną Sassa za pomocą javascript

Question

Mam plik Sass, który generuje plik CSS. Użyłem wielu zmiennych w moim pliku sass dla koloru tła, rozmiaru czcionki, teraz chcę kontrolować wszystkie zmienne za pomocą JavaScript.

Na przykład w style.sass mamy

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

Jak mogę zmienić te wartości z JavaScript?

Answer 1

Nie możesz. SASS jest preprocesorem CSS, co oznacza, że ​​szczegółowe informacje SASS znikają po kompilacji do CSS.

Answer 2

JavaScript działa po stronie klienta (w przeglądarce), podczas gdy Sass jest generowany po stronie serwera, więc musisz znaleźć sposób na wypełnienie luki. Jednym ze sposobów na to jest skonfigurowanie słuchania w stylu AJAX, aby przesłać zdarzenia JavaScript na serwer, a następnie przeprowadzić edycję serwera i ponownie skompilować plik style.sass.

Answer 3

Jeśli chcesz zrobić to, co robi bootstrap (np. Edytując pola, aby pobrać motyw).

Musiałbyś:

1. Czy pliki na strony, które chcesz edytować
2. przechowywania tych zmiennych jako ciąg i używać .replace() do wyszukiwania i zamiany zmiennych
3. Output ten ciąg i skompiluj go do pliku lub zip go do pobrania.

Osobiście zrobię to z php.

Answer 4

Udostępnianie danych między Sass i JavaScript za pomocą JSON.

Zobacz powiązane pytanie https://stackoverflow.com/a/26507880/4127132

Answer 5

Musiałem także tę funkcjonalność, oto co pracował dla mnie:

z JS można ustawić klasę do ciała, ex. .blue lub .default Teraz utworzyć zestaw reguł rozszerzenia z, której chcesz ustawić:

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

Teraz zamiast color: $someColor w pliku SCSS, używać go tak:

.someClass { 
    @extend .themeColor; 
} 

Teraz, jeśli twoje ciało będzie miało klasę default, kolor wewnątrz someClass będzie czerwony, a jeśli ciało będzie miało klasę blue, kolor będzie niebieski.