// 1px 边框 @mixin border-1px($color: #eee, $style: solid, $position: bottom) { position: relative; &::after { content: ''; position: absolute; background-color: $color; display: block; width: 100%; height: 1px; transform: scaleY(0.5); @if $position == top { top: 0; } @if $position == bottom { bottom: 0; } } } // 固定定位 @mixin fixed($position: bottom) { position: fixed; @if $position == top { top: 0; left: 0; right: 0; } @if $position == bottom { bottom: 0; left: 0; right: 0; } z-index: 999; } // 安全区域 @mixin safe-area($position: bottom) { @if $position == top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } @if $position == bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } } // 定义混入 @mixin flex-center { display: flex; justify-content: center; align-items: center; }