如何在SCSS中封装自适应的正方形CSS容器Mixin？-css教程-PHP中文网

直接用 aspect-ratio 即可，无需 scss 封装；仅当需兼容旧版 safari 时，才需通过 @mixin square 处理降级逻辑。

如何在scss中封装自适应的正方形css容器mixin？

直接用 `aspect-ratio` 就别封装了

如果项目只支持 Chrome 88+、Firefox 89+、Safari 15.4+，aspect-ratio: 1 / 1 一行搞定，根本不需要 SCSS 封装。加个 width: 100% 或 max-width 控制自适应宽度即可，高度自动跟随。强行封装反而增加维护成本，且掩盖了浏览器兼容性这个真实约束。

`@mixin square` 必须处理降级逻辑

真正需要封装的场景，是必须兼容旧版 Safari（padding-bottom: 100% + height: 0 方案，但不能简单把样式堆进去——SCSS mixin 要负责把现代写法和降级写法都输出，且顺序不能错：

现代属性（aspect-ratio）必须写在降级规则之后，否则会被覆盖
降级部分要确保父容器有明确宽度（比如 width: 100%），否则 padding-bottom: 100% 无意义
内容区需配合 position: absolute 填充，否则会被 padding 推下去；这不属于 mixin 职责，但文档里得提醒

示例写法：

@mixin square {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  // 现代写法后置，覆盖降级
  aspect-ratio: 1 / 1;
  height: auto;
  padding-bottom: 0;
}

传参设计要避开单位混杂

别让使用者传 100vw 或 50% 这类带单位的值进 mixin——SCSS 插值容易出错，且无法做单位校验。真正该暴露的参数只有两个：

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

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

下载

$ratio：纯数字比值，如 1（正方形）、4/3（宽屏图）
$width：可选，用于控制基础宽度，类型限定为 length（如 100%、20rem），避免传字符串

这样既保证编译安全，又留出扩展性。例如：

@mixin square($ratio: 1, $width: 100%) {
  width: $width;
  height: 0;
  padding-bottom: percentage($ratio);
  position: relative;

  aspect-ratio: #{$ratio} / 1;
  height: auto;
  padding-bottom: 0;
}