Как использовать правила CSS в зависимости от переменной среды. То есть я хочу условно применить стили в файле .scss, основанном на значении переменной среды (которая имеет значение true или false).
Я нашел этот вариант, но он будет в процессе сборки:
Код: Выделить всё
@if $APPLY_STYLES == true {
.element .apply-style {
color: blue;
}
}
Мне интересно сделать это во время выполнения, как я могу это сделать? Например, если я сделаю это таким образом, то порядок имени класса в правиле будет иметь значение, т. е. в этом примере есть только один класс, но что произойдет, если их будет несколько, определяющих более высокую специфичность? Когда вы добавляете класс, куда он добавляется? Должно быть .element .apply-style или .element.apply-style
Код: Выделить всё
.element {
color: black; /* Default case */
}
.element .apply-style {
color: blue; /* If APPLY_STYLES is true */
}
const applyStyles = this.env.APPLY_STYLES;
const element = document.querySelector('.element');
if (applyStyles === 'true') {
element.classList.add('apply-styles');
}
В любом случае, я не знаю, лучше ли это делать.
Подробнее здесь:
https://stackoverflow.com/questions/783 ... at-runtime
Мобильная версия