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>
메모:
- 일반 HTML에는 body가 있으므로
:root {}수정이 가능합니다. - 미니 프로그램은 본체가 없어 동작하지 않으나
:root {}, 네이티브 미니 프로그램은 태그가 있어서 설정 등이page-meta가능하니 링크를 참고하세요root-font-sizepage-font-size