html和小程序统一修改基础样式的设置

本文链接：https://blog.csdn.net/weixin_55556204/article/details/124468468

sass 统一修改设置的基础字体大小（包括颜色宽度等），以及小程序的解决方案

index.scss

:root {
  --fontSize-primary: 14px;  //--width-primary  ：变量名，css3有规则
}
$fontSize: var(--fontSize-primary); // 用var来盛放变量名

.box {
  font-size: $fontSize + 6px;
}

将 .scss 编译后，直接在 .html 里面引用 .css

编译后的index.css

:root {
  --fontSize-primary: 14px;
}

.box {
  font-size: var(--fontSize-primary) + 6px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="box"></div>
  <script>
    document.getElementsByTagName('body')[0].style.setProperty('--fontSize-primary', '12px');
  </script>
</body>
</html>