css - SASS - 用于 h1-h6 风格

Question

我有这样的 SCSS 样式，我想使用 SCSS 中的@for 来更高效地编写它。

到目前为止:

@for $i from 1 through 6 {
  h#{$i} {
    $size: {$i} * 1.4;
    @include font-size($size);
  }
}

注意:不要介意计算大小，只是为了测试

但是语法不对。

预期输出

h1 {
  @include font-size(3.2);
}

h2 {
  @include font-size(2.4);
}

h3 {
  @include font-size(1.8);
}

h4 {
  @include font-size(1.6);
}

h5 {
  @include font-size(1.3);
}

h6 {
  @include font-size(1.2);
}

Answer 1

主要问题是您的 h1 的大小随着它的数量增加而增加(因为您正在逐步使用 $i )。您可以通过使用公式 7 - $i 减小 h 数大小来避免这种情况。

@for $i from 1 through 6 {
    h#{7 - $i} {
        fontsize: $i * 1.4em;
    }
}

这里的输出是:

h6 { font-size:1.4em }
h5 { font-size:2.8em }
h4 { font-size:4.2em }
h3 { font-size:5.6em }
h2 { font-size:7em }
h1 { font-size:8.4em }

这似乎是有道理的。您得到的原始错误是这样的:

Invalid CSS after "$size:": expected expression (e.g. 1px, bold), was "{$i} * 1.4;"

因为您可以简单地将 $i 用作数字而无需特殊表示。

为了让数字与你的问题相匹配，你实际上应该找到一种方法来即时计算它们 - 你上面显示的数字不是一个模式，所以它们不是数学上的可控的。您可以执行以下操作:

@for $i from 1 through 6 {
    h#{7 - $i} {
        fontsize: 3.4em / 6 * $i;
    }
}

这不能像您的问题所希望的那样通过数学计算的原因是:h1 - h2 = .6em, h2 - h3 = .6em, h3 - h4 = .2em => 最后一个不符合任何特定模式。