Question

在此函数中，ms()是另一个根据从1em值开始的黄金比例（1.618）缩放字体大小的函数。因此，例如，级别1（ms(1)）的字体大小为1.618em，第二级（ms(2)）为2.6179em，依此类推。

我希望以下函数返回给定级别的无单位行高。

我认为数学是正确的，但我无法让它发挥作用。我一直在使用Sass几天，所以也许这是与单位或类似事情有关的基本错误。尽管如此，它并没有抛出任何错误信息。

$line-height-ratio:2;    
@function vr($level) {
        $level-font-size: ms($level);
        $line-height-multiple: 1;
        @while ($line-height-multiple * $line-height-ratio * ms(1)) < $level-font-size {
                $line-height-multiple: $line-height-multiple + 1;
            }

        @return ($line-height-multiple * ms(1) * $line-height-ratio)/$level-font-size;
    }

所以，我不想解释数学，而是想知道函数是否有任何错误或者如何调试它。

我使用Sass 3.4.13。

更新 - 数学解释

This site解释了垂直节奏和此网站modular scale。这就是应该如何应用该功能：

h1 {
font-size: ms(4); //returns font-size scaled to a factor 4 times
line-height: vr(4); // returns the line height to contain that font size and that also is a multiple of ms(1). 
} 

h2 {
font-size: ms(3);
line-height: vr(3); 
}

对于我的功能，使用ms()功能可以实现模块化比例。给定一定级别，它返回该级别的字体大小。我们的比例因子默认设置为1.618（黄金比例）ms()，因此，如果我们的基本字体大小为1em或16像素，ms(1)应返回1.618em，然后ms(2) 1.618 ^ 2，然后ms(3) 1.618 ^ 3等

对于垂直节奏函数vr()，它应返回行高度ms(1)的倍数。垂直节奏的因子不是指数的，就像模块化尺度的情况一样，它不会通过乘以常数因子而增长，而是以恒定的比率增长。

（我们如何计算线高？：如果ms(1)是1.618em并且我们希望字体大小和线高之间的关系为1：2，则线高应为1.618 * 2 。）

现在，回到垂直节奏。定义的线高应该以其自身的倍数增长，即（1.618 * 2）* 2，然后（1.618 * 2）* 3，然后（1.618 * 2）* 4.决定线高度增长的因素不是级别，但该级别的字体大小。因此，如果我们想要设置一个1.618 ^ 3字体大小的标题，我们将不得不增加行高，因为（1.618 * 2）小于1.618 ^ 3。所以，我们通过乘以2来增加行高（1.618 * 2）。这解释了这个：

$line-height-multiple * $line-height-ratio * ms(1) 2 * (1.618 * 2)

这就是为什么，对于前两个级别，$line-height-multiple应该是1，因为行高仍然大于字体大小，但是当字体大小更大时，我们应该添加1到$line-height-multiple直到行高符合字体大小：

@while ($line-height-multiple * $line-height-ratio * ms(1)) < $level-font-size { $line-height-multiple: $line-height-multiple + 1; }

现在我们遇到的问题是找到我们正在应用它的级别的字体大小的无单位行高。 $line-height-multiple * $line-height-ratio * ms(1)表示相对于ms(1)字体的行高。由于行高是根据当前字体大小计算的，而不是ms（1），我们应该将它除以级别字体大小。

更新2 - 工作示例

以下是一个工作示例：http://codepen.io/anon/pen/NqxLwq。一切都很好（几乎）。我以前的问题是我在使用它后定义了该函数。

现在，像素变圆，所以一行高度计算为51.7769584655762px并四舍五入为52px，另一行51.7770957946777px四舍五入为51px（??）。

计算垂直节奏的功能

0 个答案: