javascript - 如何使用 JavaScript 更改 SASS 属性？

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

不，没有办法从 SASS 或 LESS 添加 CSS，请使用 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);

Demo: