首页 > 文章 > 前端

如何通过SCSS变量实现全局字号缩放_REM单位与SCSS计算

时间：2026-05-02 21:24:37 492浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《如何通过SCSS变量实现全局字号缩放_REM单位与SCSS计算》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

正确做法是将REM基准值定义为无单位SCSS变量（如$font-scale: 16），在:root中转为px，并用rem-calc()函数统一计算rem值，避免硬编码和JS动态设置冲突。

SCSS里用`$font-scale`统一控制REM基准值

REM缩放本质是改根元素font-size，但直接在:root里写死数值会导致后续所有rem值被锁定。正确做法是把根字号设为一个SCSS变量，并让所有rem计算基于它——这样只需改一处变量，全局字号就等比缩放。

常见错误是把$font-scale定义成像素值（如$font-scale: 16px），这会让1rem永远等于16px，失去缩放能力。应该定义为无单位数字（如$font-scale: 16），再在:root中显式转成px：

$font-scale: 16;
<p>:root {
font-size: #{$font-scale}px;
}</p>

之后所有rem值都用#{$font-scale} * X方式生成，比如1.5rem对应(1.5 * $font-scale) + px，而不是硬写24px。

用`rem-calc()`函数自动转像素为REM

手算14px / 16 = 0.875rem容易出错，尤其当$font-scale后期改成14或18时，所有手动写的rem值都会失效。必须封装计算逻辑。

推荐定义一个SCSS函数，输入像素值，返回对应REM字符串：

@function rem-calc($px, $base: $font-scale) {
  @return ($px / $base) * 1rem;
}

使用时：font-size: rem-calc(20); → 输出1.25rem（假设$font-scale: 16）；margin: rem-calc(8) rem-calc(16);也完全可行。

第二个参数$base支持局部覆盖，比如适配高DPI屏时可传rem-calc(20, 32)
函数返回带单位的值，不能用于数学运算（如rem-calc(16) * 2会报错），需先提取数值再乘
别用calc() CSS函数替代——那是运行时计算，无法参与SCSS编译期缩放

媒体查询里动态切换`$font-scale`要避开编译陷阱

想在@media (min-width: 768px)里把字号放大1.25倍？不能直接在媒体查询里重定义$font-scale——SCSS变量作用域是块级的，且编译时已固化，媒体查询内改变量对已生成的CSS无效。

正确思路是：提前定义多套$font-scale，用@if生成不同断点下的:root样式：

$font-scale-mobile: 14;
$font-scale-tablet: 16;
$font-scale-desktop: 18;
<p>:root {
font-size: #{$font-scale-mobile}px;
}</p><p>@media (min-width: 768px) {
:root {
font-size: #{$font-scale-tablet}px;
}
}</p><p>@media (min-width: 1024px) {
:root {
font-size: #{$font-scale-desktop}px;
}
}</p>

关键点：