scss background mixin

background.scss

//background(0, 0, 100, 100, contain, 50%, 50%)
@mixin background(
  $x: 0, $y: 0, // 元素区坐标 x y
  $width: 100, $height: 100, // 元素区尺寸 w h
  $adaption: contain, // 适配方式 contain cover fill
  $horizontal: 50%, $vertical: 50% // 适配区对齐 m n
) {
  $v: 1080; // 适配区宽 v
  $g: 1920; // 适配区高 g

  position: absolute;
  left: percentage($x/$v);
  top: percentage($y/$g);
  width: percentage($width/$v);
  height: percentage($height/$g);
  background-repeat: no-repeat;
  @if($adaption == fill) {
    background-size: 100% 100%;
  }
  @else {
    background-size: $adaption;
    background-position:
      percentage(($horizontal/100%*$v - $x)/$width)
      percentage(($vertical/100%*$g - $y)/$height)
    ;
  }
}