Css SASS-适用于h1-h6型

我有这样的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);
}

---

主要问题是，当您的

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

=>最后一个不符合任何特定的模式。

看在上帝的份上，了解一下

em

你认为在

font-size（）

mixin？无论如何，输出不应使用

@include

。。。语法中唯一的错误是：

$size:{$i}*1.4

-它应该是

$size:$i*1.4您当前的问题是什么