SASS - h1-h6风格

Question

我有这样的SCSS风格，我想用@for从SCSS来写这个更有效率。

迄今为止：

@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 =>，最后一个不符合任何特定的模式。