如何使用JavaScript更改SASS属性？

我想动态更改属性

baseFontSize

我可以这样做吗：

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

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

---

否，

$baseFontSize

是在构建应用程序时计算的，这意味着它在运行脚本之前完成并成为静态值（不是变量）。因此，在最后的

css

中，不再需要调用

$baseFontSize

---

您可以重写特定类的值，但不能重写sass变量，因为它不在js范围内。不，无法从sass或更少的版本添加CSS，请使用JavaScript，下面的示例可能会对您有所帮助

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

---

您无法使用JavaScript动态更改

$baseFontSize

变量，因为当您尝试在其上使用JavaScript时，sass将被编译为css

如果您只是想增加基本文档大小（因此所有其他rem大小值都会随之增加），那么您可以在

下面的示例显示了一个基本字体大小从16px增加到30px的文档，以及它如何影响使用rem的任何大小

html{
字体大小：16px；
}
.测试{
字号：2rem；
}

函数changeRootSize（）{
document.documentElement.style.fontSize='30px'；
}
点击我

您不能，在渲染页面之前出现的是SASS/LESS，您只能访问生成的CSS。您想何时更改

baseFont

的值？我猜当你点击某个自定义缩放按钮时。只需更改

和

的

字体大小的值。
//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);