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