具有多个值的Sass函数

您好，我有这个函数，它根据像素输入和基本大小计算rem值

@function unit($number) {
  @return $number / ($number * 0 + 1);
}

@function calcRem($size, $_base-fontsize:16px) {
  $remSize: unit($size) / strip-unit($_base-fontsize);
  @return #{$remSize}rem;
}

.image {
            padding-top:calcRem(250px);
}

我希望能用一个类似的速记来称呼它

.image {
            padding:calcRem(250px 25px 10px 50px);
}

---

如何做到这一点？

我假设您正在使用Hugo Giraudel在CSS技巧中提供的

strip unit

功能以及其他代码

我发现他在Sass列表上的文章很有帮助：

下面介绍如何展开此计算，使用mixin使用多个参数：

@function unit($number) {
  @return $number / ($number * 0 + 1);
}

@mixin paddingRems ($paddingPixels: 0 0 0 0, $_base-fontsize:16px) {
  // Create empty SASS variable to hold array of calculated rem values
  $paddingRems: ();

  // Loop over $paddingPixels arguments array
  @each $padding in $paddingPixels {
    // For each argument, perform the calculation, add 'rem' to the end, and remove the quotes.
    // Then, append the argument to the new variable / array, using spaces instead of commas as separators.
    $paddingRems: append($paddingRems, unquote(unit($padding) / strip-unit($_base-fontsize) + 'rem'), 'space');
  }

  // Set the contents of the calculated arguments array to the shorthand version of the padding CSS property.
  padding: $paddingRems;
}

.image {
  @include paddingRems(250px 10px 20px 10px);
}

---

也可用作要点：

我做了一个小改动，使之成为一个返回转换为rems的像素的函数

@function unit($number) {
  @return $number / ($number * 0 + 1);
} 

@function paddingRems($paddingPixels, $_base-fontsize:16px) {
    $paddingRems: ();
      @each $padding in $paddingPixels {
        $paddingRems: append($paddingRems, strip-unit($padding) / strip-unit($_base-fontsize) +    rem,'space');  
  }

  @return  $paddingRems;
} 

.image {
        padding:paddingRems(250px 25px 10px 50px);
}

---

谢谢，但是使用padding执行非常重要：calcRem（250px25px10px50px）；而不是通过@include