现代项目应优先使用css原生aspect-ratio，sass仅用于兼容旧版safari的padding-top降级及批量生成比例类；因aspect-ratio为无单位比值，无法被calc()动态计算，故sass只能通过条件编译输出不同方案。
现代项目直接用 aspect-ratio，Sass 只需做兼容兜底和批量生成；老项目或需支持 Safari 15.3 及更早版本时，才值得用 Sass 编译 padding-top 百分比方案。
为什么 Sass 不能直接编译 aspect-ratio 值？
aspect-ratio 是无单位比值（如 16 / 9），不是长度，不能被 clamp() 或 calc() 动态计算。Sass 变量可以存它，但无法在媒体查询中“切换值”——CSS 不允许 aspect-ratio: calc(16 / 9) 这类写法，会解析失败。
所以 Sass 的真实作用是：
- 用
@if $supports-aspect-ratio条件编译，决定是否输出aspect-ratio: 4 / 3或降级为padding-top: 75% - 批量生成不同比例的类名，比如
.ratio-4-3、.ratio-16-9，避免手算百分比 - 把
$w: 4, $h: 3转成percentage($h / $w)，自动算出75%，防小数点错误
Sass 里正确生成 padding-top 百分比的关键写法
别写 padding-top: #{$h / $w * 100}% —— Sass 会把 3 / 4 算成 0（整数除法）。必须用 percentage($h / $w)，且确保输入是浮点数：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
@mixin ratio-container($w: 16, $h: 9) {
position: relative;
width: 100%;
padding-top: percentage($h / $w); // ✅ 正确：返回 "56.25%"
& > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
}
常见坑：
- 传整数
@include ratio-container(4, 3)→percentage(3 / 4)在旧版 Sass 中可能得0%，应写@include ratio-container(4.0, 3.0) - 没给子元素加
position: absolute→padding-top只是撑高父容器，内容还在文档流里，会被往下推 - 父容器是 flex item 却没设
min-width: 0→ flex shrink 可能让宽度基准丢失，padding-top: 75%就算不准
如何用 Sass 批量生成响应式比例类（兼顾 aspect-ratio 和 fallback）
目标是：小屏用 1 / 1，中屏用 4 / 3，大屏用 16 / 9，且每个都带 Safari 15.3 降级。
$ratios: (
square: (1, 1),
portrait: (3, 4),
landscape: (16, 9)
);
<p>@each $name, $pair in $ratios {
.ratio-#{$name} {
width: 100%;
@if $supports-aspect-ratio {
aspect-ratio: nth($pair, 1) / nth($pair, 2);
} @else {
padding-top: percentage(nth($pair, 2) / nth($pair, 1));
position: relative;
& > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
}
}
}</p>
注意两点：
-
@supports (aspect-ratio: 1)不能写在 Sass 里做条件——它得是最终 CSS 中的运行时检测，所以$supports-aspect-ratio应是手动开关变量（上线前根据目标浏览器设true或false） - 别试图在同一个类里同时写
aspect-ratio和padding-top：部分旧版 Safari 会因高度计算逻辑冲突导致塌陷
真正容易被忽略的点：内容缩放不等于容器缩放
aspect-ratio 或 padding-top 都只管容器尺寸，不管里面文字、按钮、图片是否跟着“等比变小”。想让字体随宽度缩放，必须单独用 font-size: clamp(0.875rem, 4vw, 1.25rem)；图片要填满又不拉伸，得配 object-fit: cover 和 width: 100%; height: 100%。这些都不是 Sass 能自动解决的，得人工对每个子元素补样式。否则卡片看着比例对了，点进去才发现标题糊成一团、按钮挤在角落——这才是线上最常被骂的地方。
