萨斯功能与多个值

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

我假设您在CSS-Tricks中使用Hugo Giraudel的strip-unit功能，并与其余代码一起使用。

我发现他在萨斯本文列出了很大的帮助：http://hugogiraudel.com/2013/07/15/understanding-sass-lists/

下面是如何扩大这种计算使用一个混合使用多个参数：

@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

我做了一个小的变化，使其成为一个函数返回像素转换为雷姆斯。

@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); 
}