Function 用于在选择器内创建整个属性的SASS函数

我的目标是减少scss文件中的重复性，不必多次写出“@media…”

我在考虑这样做：

@function atMediaAll($property, $xsValue, $sValue, $mValue) {
  @return "@media screen and (min-width:" + $break-xs + "){" + $property + ":" + $xsValue + ";}";
  @return "@media screen and (min-width:" + $break-s + "){" + $property + ":" + $sValue + ";}";
  @return "@media screen and (min-width:" + $break-m + "){" + $property + ":" + $mValue + ";}";
}

@include atMediaAll("background-position", "-25px 0", "-35px 0", "-45px 0");

然后在选择器内部调用它，如下所示：

@function atMediaAll($property, $xsValue, $sValue, $mValue) {
  @return "@media screen and (min-width:" + $break-xs + "){" + $property + ":" + $xsValue + ";}";
  @return "@media screen and (min-width:" + $break-s + "){" + $property + ":" + $sValue + ";}";
  @return "@media screen and (min-width:" + $break-m + "){" + $property + ":" + $mValue + ";}";
}

@include atMediaAll("background-position", "-25px 0", "-35px 0", "-45px 0");

是否有一种与函数“@include”等价的方法，或者其他方法来实现这一点

---

任何帮助都将不胜感激。

我采用了以下方法：

@mixin atMedia($screenSize) {
  @if $screenSize == xs{
     @media only screen and (max-width: 767px ){@content;}
  }
  @else if $screenSize == s{
    @media only screen and (min-width: 768px ){@content;}
  }
  @else if $screenSize == m{
    @media only screen and (min-width: 992px ){@content;}
  }
}

@include atMedia(xs) {background-position: -25px 0;}
@include atMedia(s) {background-position: -35px 0;}
@include atMedia(m) {background-position: -45px 0;}

它占用的空间更少，但仍然非常重复