如何使用模块化比例的SASS生成所有标题的大小

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或函数(或此任务的任何适当功能)生成这些类中的每一个.

到目前为止我有:

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

还有一个演示程序可以使用它.