纯 Sass 无法实现真正的等高布局，因其编译时生成静态 CSS，而等高依赖运行时浏览器渲染（如 Flexbox 的 align-items: stretch）；Sass 仅能通过 mixin 封装布局声明或函数生成类名，不能替代布局逻辑。
纯 Sass 无法实现真正的等高布局——因为等高是运行时布局行为，Sass 编译时就结束了，它只能生成静态 CSS。所谓“Sass 等高函数”，本质是生成适配特定场景的 CSS 方案（如 Flexbox 或 Grid 的声明），或辅助计算类名/属性值，不能替代布局逻辑。
为什么 height: 100% 在 Sass 里写一百遍也不管用
很多人试图用 @function equal-height($selector) 输出 height: 100%，但问题不在写法，而在语义误解：height: 100% 要求父容器有明确高度，而多数情况下父容器高度由子内容撑开，形成循环依赖。Sass 无法注入 JS 行为去监听 DOM 高度变化，也不能动态重排元素。
- Flexbox 的
align-items: stretch是真等高，但靠的是浏览器渲染引擎，不是 Sass - Sass 只能帮你批量生成
.row--equal-height这样的类名，或统一设置display: flex相关规则 - 如果你在用 Bootstrap 或 Tailwind，它们的等高能力来自预设的 CSS 类，不是 Sass 函数实时计算出来的
可以写的实用 Sass 工具：生成 Flex/Grid 等高容器类
真正可落地的做法，是用 Sass 写一个混入（@mixin），封装常见等高布局的 CSS 声明，并支持参数定制。它不“计算高度”，但能避免重复写 display: flex; align-items: stretch。
@mixin equal-height-layout($direction: row, $wrap: nowrap) {
display: flex;
flex-direction: $direction;
flex-wrap: $wrap;
align-items: stretch;
}
// 使用
.card-grid {
@include equal-height-layout(column, wrap);
}
- 参数
$direction控制主轴方向，避免手写flex-direction: column出错 - 加
align-items: stretch是关键，漏掉它就不是等高 - 不要试图在 mixin 里加
height: 100vh—— 那属于业务逻辑，应由具体组件决定
如果非要用函数，只适合生成 BEM 类名或尺寸映射
有些团队喜欢用函数生成带高度语义的类名，比如 equal-height--sm 对应 min-height: 200px。这可行，但和“布局”无关，只是命名约定：
立即学习“前端免费学习笔记（深入）”；
@function equal-height-class($size) {
@return equal-height--#{$size};
}
// 输出 .equal-height--lg { min-height: 400px; }
.#{$equal-height-class(lg)} {
min-height: 400px;
}
- 这种函数只解决“怎么叫”，不解决“怎么高”
- 若用于响应式，需配合
@each和 map 遍历断点，但依然不触碰布局机制 - 容易误以为起了个函数就等于实现了等高，这是最常踩的抽象陷阱
真正要让几列卡片等高，你得选对 CSS 模式（Flex/Grid）、确保父容器不塌陷、必要时用 min-height 占位——Sass 最多帮你少写几行重复声明，别指望它替浏览器做 layout。
