Как я могу изменить свойство SASS с помощью JavaScript?

Question

$baseFontSize: 16;
$green: #1abc9c;
$yellow: #f1c40f;
$red: #c0392b;
$blue: #3498db;
$grey: #f2f2f2;

@function rem($val) {
  @return #{$val / $baseFontSize}rem;
}

Я хочу динамически изменить свойство baseFontSize.

Могу ли я сделать что-то вроде этого:

document.getElementById('test').style.......

Answer 1

Нет, нет способа добавить CSS из SASS или LESS, используйте JavaScript, который может быть вам полезен в следующем примере.

//remove style sheet
var sheetToBeRemoved = document.getElementById(styleID);
if (sheetToBeRemoved) {
 var sheetParent = sheetToBeRemoved.parentNode;
 sheetParent.removeChild(sheetToBeRemoved);
}

//add style sheet
var sheet = document.createElement('style');
sheet.type = 'text/css';
sheet.id = styleID;
sheet.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(sheet)
//document.body.appendChild(sheet);

//apply class to body
element.addClass(baseFontSizeClass);

Демонстрация:

Answer 2

Вы не можете динамически изменить переменную $baseFontSize с помощью JavaScript, так как sass будет скомпилирован в css к тому времени, когда вы попытаетесь использовать на нем свой JavaScript.

Если вы просто хотитеувеличьте базовый размер документа (чтобы все остальные значения размера rem увеличивались вместе с ним), затем вы можете увеличить размер шрифта на documentElement

В приведенном ниже примере показан документ с базовымразмер шрифта 16px увеличивается до 30px и как это повлияет на размер шрифта rem

html {
  font-size: 16px;
}

.test {
  font-size: 2rem;
}

<script>
function changeRootSize() {
    document.documentElement.style.fontSize = '30px';
}
</script>
<div class="test" onclick="changeRootSize()">
  click me
</div>

Answer 3

Нет, $baseFontSize рассчитывается при сборке приложения, то есть оно завершается и становится статическим значением (не переменным) перед запуском скрипта.Так что в последнем css больше ничего не будет вызывать $baseFontSize.

Вы можете переопределить значение определенного класса, но не можете переопределить переменную sass, так как она отсутствует вjs scope