在 @for 中使用 sass @function

Question

我有一些 sass 函数来创建相同的边距，它在这样的循环内

$short-margins: ( top: 'mt', left: 'ml', bottom: 'mb', right: 'mr' );
@for $i from 0 through 200 {
   @each $position, $prefix in $short-margins{
    .#{$prefix}-#{$i} {
      margin-#{$position}: #{$i}px;
    }
  }
}

这将创建像 mr-0 这样的边距类，依此类推，直到 mr-200，问题就出来了

margin-#{$position}: #{$i}px;

我在循环中创建了 px，但我需要它在 rem 中吗？我有一些这样的功能

$base-font-size: 14px;

// Remove units from the given value.
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

// convert only single px value to rem
@function single-px-to-rem($value) {
  $unitless-root-font-size: strip-unit($base-font-size);
  @return $value / $unitless-root-font-size * 1rem;
}

但是当我想像这样在循环中使用函数时

@for $i from 0 through 200 {
   @each $position, $prefix in $short-margins{
    .#{$prefix}-#{$i} {
      margin-#{$position}: single-px-to-rem(#{$i});
    }
  }
}

它不编译会抛出错误，有没有人知道如何在@for 中使用 sass @function？

Answer 1

你做得对，但你需要发送 $i 值而不发送 interpolation：

@for $i from 0 through 200 {
   @each $position, $prefix in $short-margins{
    .#{$prefix}-#{$i} {
      margin-#{$position}: single-px-to-rem($i);
    }
  }
}