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:

Answer 2

否，<div class="col-sm-6"> <a href="#" class="image-wrap"> <img class="menu-image" src="https://i.imgur.com/vgpoAdA.png" /> <div class="overlay">Basement<br/>Remodel</div> </a> </div>是在构建应用程序时计算的，这意味着它会在运行脚本之前完成并成为静态值（而非变量）。因此，在最后的$baseFontSize中，将不再有任何呼叫css。

您可以覆盖特定类的值，但不能覆盖sass变量，因为它不在js范围内

Answer 3

您无法使用JavaScript动态更改$baseFontSize变量，因为在尝试在其上使用javascript时，sass已被编译为css。

如果您只是想增加基本文档的大小（因此所有其他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>

如何使用JavaScript更改SASS属性？

3 个答案: