时间戳

首页 > 解决方案 > 在 @for 中使用 sass @function

sass - 在 @for 中使用 sass @function

问题描述

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

标签： sassscss-mixins

解决方案

你做对了，但你需要在$i没有插值的情况下发送值：

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

推荐阅读