html - 如何使用带有模块化比例的 SASS 为所有 header 生成尺寸

Question

我希望使用 SCSS 创建 H1 到 H6 的尺寸。这个例子假设我已经创建了变量 $base-size 和 $modular-scale。具体来说:

h6: $base-size * $modular-scale * 1
h5: $base-size * $modular-scale * 2
h4: $base-size * $modular-scale * 3
...
h1: $base-size * $modular-scale * 6

我不知道如何使用混合或函数(或任何适合此任务的功能)生成这些类中的每一个。

到目前为止我有:

@mixin make-header-size ($type, $scale) {
  .#{$type} {
    $type * $scale * (...scalar)
  }
}

不确定如何完成其​​余部分以便我可以简洁地生成每个尺寸。

Answer 1

这里有一个简单而小的 @for 循环来生成六种标题样式，其中包含一个 scale 变量，该变量指示标题从 h6 增长到 h1 的 px 数量:

// h6 starts at $base-font-size 
// headings grow from h6 to h1 by $heading-scale
$base-font-size: 18px;
$heading-scale: 8; // amount of px headings grow from h6 to h1

@for $i from 1 through 6 {
  h#{$i} {
    font-size: $base-font-size + $heading-scale * (6 - $i);
  }
}

还有一个 demo codepen和它一起玩。