Способы определения переменных CSS из файла JSON или из файлов машинописных файлов?

Question

Я хочу определить переменные CSS, как в Sass. Что-то вроде:

.someClass { 
    background-image: $imageLink; 
    color: $someColor; 
} 

И я хочу, чтобы определить $ IMAGELINK и $ someColor в моем классе или в JSon файле.

Могу ли я сделать это без Sass или Less? (Или без переменных css, потому что он не поддерживается в IE.)

Я использую angular2 и webpack в своем проекте.

Answer 1

Конечно, вы не можете установить переменные SASS во время выполнения, потому что к этому времени SASS уже скомпилирован.

Классический подход заключается в том, чтобы вместо этого думать в терминах «темы» и выбирать тему для класса на элементе более высокого уровня (например, в теле). Таким образом, вы могли бы

.darktheme .someClass { color: white; } 
.lighttheme .someClass { color: black; } 

Теперь из ваших JS вы можете изменить тему с

document.body.classList.add('darktheme');