在@for内使用sass@函数

我有一些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;
    }
  }
}

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

这将创建这样的保证金类别mr-0，等等，直到mr-200，问题已经解决

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

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

$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;
    }
  }
}

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

但当我想在循环中使用函数时

$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;
    }
  }
}

$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@函数吗？

你做得对，但你需要发送

$i

值，但不包括：