Question

你好，我有这个函数，根据像素输入和基本尺寸计算一个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);
}

我该怎么做？

Answer 1

我假设您正在使用Hugo Giraudel在CSS-Tricks中使用的strip-unit函数以及其他代码。

我发现他在Sass列表上的文章非常有帮助：http://hugogiraudel.com/2013/07/15/understanding-sass-lists/

以下是如何使用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);
}

也可作为要点：https://gist.github.com/StephenKoller/31f2e4b4260909fb60b303cd994903d3

Answer 2

我做了一个小变化，将一个函数返回到转换为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);
}

具有多个值的Sass函数

2 个答案: