如何在SCSS中封装跨端通用的CSS Flex弹性间距gap垫片？-css教程-PHP中文网

scss中应通过@mixin flex-gap($row: 0, $col: $row)封装gap，同时生成margin + :not(:last-child)降级规则并抵消首尾溢出，兼容不支持gap的旧环境。

如何在scss中封装跨端通用的css flex弹性间距gap垫片？

直接在SCSS中用`@mixin`封装`gap`，但必须处理兼容性降级

现代浏览器已普遍支持gap（Chrome 84+、Firefox 63+、Safari 14.5+、Edge 88+），但微信小程序 WebView、部分安卓低版本 UC 内核、以及仍需支持 IE11 的政企项目，gap会静默失效。所以 SCSS 封装不能只写gap，得内置回退逻辑。

推荐做法是：用@mixin flex-gap($row: 0, $col: $row)，默认双值语义（row-gap优先），同时生成margin + :not(:last-child)降级规则，并自动抵消首尾溢出。

$row和$col单位必须一致（如都用px或rem），混用会导致 CSS 变量计算混乱
不建议在 mixin 中硬编码margin-left/margin-top——方向应由flex-direction决定，但 SCSS 无法运行时感知 DOM，所以降级规则只覆盖横向（row）和纵向（col）两个正交维度，由调用方控制布局方向
避免用margin-right + :not(:first-child)，因为order属性可能打乱视觉顺序，:last-child更可靠

`gap`在 Flex 容器上生效的前提条件

SCSS 封装再漂亮，如果容器没满足基础条件，gap照样不工作：

父容器必须有display: flex或display: inline-flex，gap对block或grid无效（哪怕子项是 flex）
gap只作用于**直接子元素**，嵌套 flex 容器里的孙子项不会被外层gap影响
子项若设了position: absolute，它脱离文档流，gap对其完全无感
IE 任何版本都不支持gap，加-ms-前缀也无效，检测到IE UA 时应跳过gap输出，只保留降级样式

SCSS 封装示例：带 Safari 14.4 以下检测的`flex-gap`

以下 mixin 在 Dart Sass 1.77+ 下验证通过，兼顾可读性与生产可用性：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@mixin flex-gap($row: 0, $col: $row) {
  // 主流浏览器：原生 gap
  @if $row != 0 or $col != 0 {
    @if $row == $col {
      gap: $row;
    } @else {
      row-gap: $row;
      column-gap: $col;
    }
  }

  // 兼容降级：仅当 $row 或 $col 非零时才输出 margin 规则
  @if $row != 0 {
    & > *:not(:last-child) {
      margin-bottom: $row;
    }
  }
  @if $col != 0 {
    & > *:not(:last-child) {
      margin-right: $col;
    }
  }

  // Safari ≤14.4 特殊处理：用 @supports 检测并覆盖
  @supports not (gap: 0) {
    @if $row != 0 or $col != 0 {
      & > *:not(:last-child) {
        margin-bottom: $row;
        margin-right: $col;
      }
    }
  }
}

用法：.card-list { @include flex-gap(12px, 8px); } → 同时生成row-gap/column-gap和降级margin；若只传一个参数@include flex-gap(16px)，则行列等距。

注意：@supports not (gap: 0)在 Safari 14.4 及更早版本中返回true，但它不会触发错误，只是忽略gap声明——所以降级规则必须显式写出，不能依赖“未声明即 fallback”。