极简排版的核心是“可预测的克制”，需用@spacing-unit统一留白、@contrast-ratio保障对比度，配合less变量与函数实现动态、一致、可维护的样式系统。
用 @spacing 和 @contrast-ratio 统一控制留白与对比度
极简排版的核心不是“删减”，而是“可预测的克制”——所有 margin、padding、line-height 必须来自同一套缩放基数，所有文字颜色必须满足最小对比度阈值。Less 的变量是唯一能守住这条线的机制。
推荐定义两个主控变量：
-
@spacing-unit: 0.5rem;—— 所有留白以它为倍数：如@spacing-sm: @spacing-unit * 1;、@spacing-lg: @spacing-unit * 3; -
@contrast-ratio: 4.5;—— 用于后续计算深色背景下的浅色文字是否达标（WCAG AA 级）
避免用像素值硬写 12px 或 16px，否则后期调整时会漏改某处 padding-bottom: 14px 这类“特例”。
lighten() 和 contrast() 配合 @contrast-ratio 动态生成文本色
手动选色极易破坏对比一致性。Less 提供 lighten() 和内置的 contrast() 函数，可基于主色自动推导安全文本色。
例如：
@primary: #2d3748;
@bg: #f7fafc;
<p>// 自动判断：深色文字还是浅色文字更合规
@text-on-bg: contrast(@bg, @primary, #ffffff, @contrast-ratio);</p><p>// 输出即为 #2d3748 或 #ffffff，取决于 @bg 与 @primary 的对比结果
body { color: @text-on-bg; }
</p>
注意：contrast() 第三、四参数是 fallback 色，不是“亮色/暗色”语义，而是“当对比不足时强制用哪个”。别误写成 contrast(@bg, #000, #fff) 就完事——它不校验是否真达标，只按固定阈值切换。
用 .type-scale() 混入统一字号节奏与行高
极简排版忌讳随意缩放字体。一个 .type-scale() 混入能把 h1 到 small 全部绑定到同一比例序列（如 1.25、1.5、1.75），同时联动 line-height 和 margin-bottom。
示例定义：
.type-scale(@ratio: 1.25) {
h1 { font-size: 2rem; line-height: @ratio * 1.2; margin-bottom: @spacing-lg; }
h2 { font-size: 1.5rem; line-height: @ratio * 1.15; margin-bottom: @spacing-md; }
p { font-size: 1rem; line-height: @ratio; margin-bottom: @spacing-sm; }
}
调用时只需 .type-scale(1.33);，整套文字节奏就整体上浮——比逐个改 font-size 安全得多。别忘了把 @spacing-md 这类变量也提前定义好，否则混入里又出现魔法数字。
留白层级必须显式声明，禁用 margin: 0 auto 类无意义缩写
极简风格下，每一处留白都有功能意图：margin-top 是分隔上文，margin-bottom 是预留呼吸空间，margin-left/right: auto 是居中而非“消除左右边距”。Less 无法帮你判断意图，但能阻止你偷懒。
做法是：禁用所有 margin: ... 四值缩写，强制拆解为单边声明。例如：
- ❌
margin: @spacing-sm 0 @spacing-lg; - ✅
margin-top: @spacing-sm; margin-bottom: @spacing-lg;
这样既暴露了“这里到底想控制哪几边”，也方便未来加媒体查询微调某一边——比如在移动端把 margin-top 改为 @spacing-xs，而 margin-bottom 保持不变。
真正难的不是写对这几个变量，而是每次新增一个组件时，都得问一句：它的上下留白，是否复用了已有的 @spacing- 变量？它的文字色，是否经过 contrast() 校验？这种重复确认，才是极简主义在 CSS 里落地的门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
