@for 在 precss 或 sass 中的 mixin 中循环

Question

我的 precss 样式表中有这个很棒的 for 循环。我想将它转换为一个 mixin，我可以在其中为不同的媒体查询传递 $size (font-size) 和 $spacing(letter-spacing) 的起始值。当我从mixin调用它时，我无法让变量随着循环的进行而增加。从样式表中可以正常工作

/*--adds .4 rem to each heading fz and character spacing 1-6---*/
$size: 1.8rem;
$spacing: 7px;
@for $i from 6 through 1 {
    h$i {
        font-size: resolve($size);
        letter-spacing: resolve($spacing);
        @extend %heading;
      }
        $size: $size + .4rem;
        $spacing: $spacing * 1.2;
    }

Answer 1

当包装在 SCSS 中的 @mixin 声明中时，您当前的代码接近于作为 mixin 工作。唯一需要的调整是使用#{$variable}在选择器中输出$i

SCSS 输入：

%heading{
  /* heading properties */
  color: #999;
  font-family: sans-serif;
}

@mixin headingSize($size: 1.8rem, $spacing: 7px){
  @for $i from 6 through 1{
    h#{$i}{
      @extend %heading;
      font-size: $size;
      letter-spacing: $spacing;
    }
    $size: $size + .4rem;
    $spacing: $spacing * 1.2;
  }
}

@include headingSize($size: 2rem, $spacing: 10px);

本示例使用您原来的 $size 和 $spacing 变量作为 mixin 中的默认参数。

这是一个example JSFiddle 在行动中。

CSS 输出：

h6, h5, h4, h3, h2, h1 {
  /* heading properties */
  color: #999;
  font-family: sans-serif;
}

h6 {
  font-size: 2rem;
  letter-spacing: 10px;
}

h5 {
  font-size: 2.4rem;
  letter-spacing: 12px;
}

h4 {
  font-size: 2.8rem;
  letter-spacing: 14.4px;
}

h3 {
  font-size: 3.2rem;
  letter-spacing: 17.28px;
}

h2 {
  font-size: 3.6rem;
  letter-spacing: 20.736px;
}

h1 {
  font-size: 4rem;
  letter-spacing: 24.8832px;
}