Less中应使用.make-type-scale()混合函数生成类型比例变量，基于基准字号和缩放比率动态计算并输出@font-size-h1等变量；CSS自定义属性无法参与计算或条件逻辑，不适用于复杂排版系统。
Less中如何定义类型比例变量（type scale）
类型比例不是魔法数字，而是基于一个基准字号和缩放比率生成的有序字号集合。在Less里，最稳妥的做法是用函数配合列表生成，而不是硬编码一堆
、
变量。
推荐用
混合（mixin）封装逻辑，例如：
调用时只需
，就能批量生成整套字号变量。注意：
是Less内置函数，但只在3.5+版本支持；旧版需手写乘法或用
辅助计算。
为什么不能直接用CSS自定义属性替代Less变量管理排版
因为大型站点的排版系统不只是字号，还涉及行高、字重、字体族、响应式断点下的比例偏移等耦合逻辑。Less变量能静态求值、参与计算、条件分支，而CSS自定义属性是运行时的字符串，无法做
这样的除法运算，也不能嵌套进
查询条件中动态切换比例。
立即学习
“
前端免费学习笔记（深入）
”；
典型问题场景：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
需要在
断点下把标题比例从1.25临时切到1.15 → Less可用
或参数化mixin实现，CSS变量做不到
行高需严格匹配字号（如
）→ CSS变量只能写死
，无法联动更新
构建时剔除未使用的字号层级（tree-shaking）→ Less可配合
或模块化引入，CSS变量全量注入
如何让类型比例适配多语言与可访问性需求
中文、日文、西文字体渲染差异大，单纯按像素缩放会导致视觉层级断裂。更可靠的方式是用
单位 + 可调的根字号，并将类型比例锚定在
的
上。
实操建议：
定义
而非
，允许用户缩放时字号同步变化
对CJK文本单独加
微调视觉大小（部分浏览器支持）
用
包裹响应式类型比例，避免IE等老环境崩溃
为屏幕阅读器隐藏的辅助文本（如
）禁用比例缩放，固定用
并设
常见错误：在媒体查询里重复调用
导致变量覆盖
Less变量作用域是“文件级”且不可重声明，如果在多个
块里分别调用
，后一次会覆盖前一次，最终所有上下文都拿到最后一个断点的值。
正确做法是分层定义：
主比例：在全局
中调用一次
生成基础变量
断点偏移：用
这类派生变量，不重新生成整套
组件内覆盖：在组件mixin中用
做轻量判断，避免污染全局
真正难处理的是设计系统中「语义字号」和「结构字号」的混用——比如
既用于图片说明，也用于表单错误提示，但后者需要更高对比度和可点击区域。这种时候，别硬塞进类型比例，单独抽成
更可控。
@font-size-h1@font-size-h2.make-type-scale().make-type-scale(@base: 16px, @ratio: 1.25) {
@h1: @base * pow(@ratio, 3);
@h2: @base * pow(@ratio, 2);
@h3: @base * pow(@ratio, 1);
@body: @base;
@small: @base / @ratio;
// 输出为变量，供后续使用
@font-size-h1: @h1;
@font-size-h2: @h2;
@font-size-h3: @h3;
@font-size-body: @body;
@font-size-small: @small;
}
.make-type-scale(16px, 1.333);pow()unit()@h2 / @h3media@tabletif()@font-size-h1 * 1.11.1extract()remhtmlfont-size@base-font-size: 100%;16pxfont-size-adjust: 0.5;@supports (font-size: clamp(...)).sr-only@font-size-smallposition: absolute.make-type-scale()@media.make-type-scale()variables.less.make-type-scale()@font-size-h1-tablet: @font-size-h1 * 0.95;@size: if(@is-card, @font-size-h3, @font-size-h2);@font-size-caption@font-size-form-error