css - 带有断点的模块化刻度为每个断点生成相同的值

Question

我正在使用https://github.com/modularscale/modularscale-sass。

我有这个设置：

$font-size-base: 16px;
$modularscale: (
  base: $font-size-base,
  ratio: 1.067,
  768px: (
    ratio: 1.125,
  ),

);

然后我使用：

h1 {
  @include ms-respond(font-size, 12);
}

但输出 CSS 为两个断点提供了相同的 font-size 值：

h1 {
  font-size:66px;
}
@media (min-width:768px){
  h1 {
    font-size:66px;
  }
}

仅使用 1.125 比率...

我究竟做错了什么 ？

谢谢

Answer 1

我写这个是为了适应两个或更多断点的逐渐变化。但是，这需要两个或多个断点，如下所示：

$font-size-base: 16px; $modularscale: ( base: $font-size-base, ratio: 1.067, 450px: ( ratio: 1.067, ), 768px: ( ratio: 1.125, ), );

关于“我做错了什么？”</p>

您应该期望该行为在一个断点上起作用，这是完全有道理的。我将打开一个问题以使这项工作按您的期望进行。