@for循环in mixin in precss或sass

Question

我在我的precss样式表中有这个很棒的循环。我想将它转换为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工作。唯一需要调整的是使用$i

在选择器中输出#{$variable}

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