Как управлять переменной Sass с помощью javascript

Question

У меня есть файл Sass, который генерирует файл CSS. Я использовал много переменных в моем sass-файле для цвета фона, размера шрифта, теперь я хочу контролировать все мои переменные с помощью JavaScript.

Например, в style.sass мы имеем

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

Как я могу изменить эти значения из JavaScript?

Answer 1

Вы не можете. SASS - препроцессор CSS, а это означает, что все SASS выделяет специфическую информацию при компиляции ее в CSS.

Answer 2

JavaScript работает на стороне клиента (в веб-браузере), в то время как Sass создается на стороне сервера, поэтому вам нужно найти способ устранить пробел в этом промежутке. Один из способов сделать это - настроить прослушивание AJAX-стиля для отправки событий JavaScript на ваш сервер, а затем отредактировать и повторно скомпилировать ваш файл style.sass.

Answer 3

Если вы хотите сделать то, что загрузите (например, редактирование полей для загрузки темы).

Вы должны были бы:

1. Есть файлы под рукой, которые вы хотите редактировать
2. хранить эти переменные в виде строки, и использовать .replace() для поиска и замены переменные
3. Вывод этой строки и скомпилировать его в файл и/или закрепить его для загрузки.

Я лично сделал бы это с помощью php.

Answer 4

Делитесь данными между Sass и JavaScript с помощью JSON.

См родственный вопрос https://stackoverflow.com/a/26507880/4127132

Answer 5

Я также нужна эта функциональность, вот что работает для меня:

С JS вы можете установить класс для тела, напр. .blue или .default Теперь создать набор правил для расширения от, которые вы хотите установить:

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

Теперь вместо того, чтобы color: $someColor в файле SCSS, использовать его как это:

.someClass { 
    @extend .themeColor; 
} 

Теперь, если ваше тело будет иметь класс default, цвет внутри someClass будет красным, а если тело будет иметь класс blue, цвет будет синим.