Question

在这些日子里，我跳进罗盘，我可以说我真的很喜欢它。顺便说一下，我想出了一些适合我需要的正确工作流程的问题。让我们举个例子：

正如你所看到的，我设置了一个相当简单的网格（5px，因为整个垂直节奏基于25px基线网格）。我想知道以哪种方式可以将非文本元素（作为容器和图像）与基线利用内置指南针mixin相匹配？

提前致谢。

Answer 1

好的，我自己找到了一个解决方案。我与你分享，也许它对某人有用，或者更好，你可以帮助我改进它。

以上面的例子为例。

让我们将基线设置为25px：

@import "compass/typography/vertical_rhythm";

$base-font-size: 16px;
$base-line-height: 5px;

@include establish-baseline;

html {@include adjust-leading-to(5);}

通过这种方式，我们将子基数细分为子单位（在这种情况下为1/5），以便在构图上有更多自由。

现在我们可以使用两个罗盘元素来相应地调整空白区域：

.inner-header {
    @include leader(3);
    @include trailer(2);
}

领导者允许通过多条基线来控制领先空间（在这种情况下，领先空间将是3行，15px）

预告片为尾随空格做同样的事情。

我不认为这是最优雅的解决方案，但现在它有效！

更新

我发现处理空白区域的最佳方法是以下简写mixin

rhythm-padding($padding-leader, $padding-trailer, $font-size)

指南针非文本元素的垂直节奏

1 个答案: