在@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

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

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

在@for 中使用 sass @function

Using sass @function inside @for

sass

scss-mixins