Compass Vertical Rhythm - HR 标签打破垂直网格

Question

我正在尝试理解垂直节奏并阅读了一整天的内容，尝试了几件事，但我的布局一直中断，因为我未能正确应用罗盘填充拖车，如屏幕截图所示：

!screenshot

• 黄色背景的行是我的 hr 标签。
• 橙色背景的是文章。

这是我的代码：

HTML：

<article>…</article>
<hr/>
<article>…</article>

CSS：

hr {
  background: rgba(yellow, 0.3);
  @include trailing-border;
  //border: 0;
  //height: 0;
  //border-top: 1px solid rgba(0, 0, 0, 0.1);
  //border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

为了简单起见，我将我的 HR 样式注释掉了。

这是另一个更明显的差距示例：

!screenshot2

hr {
  background: rgba(yellow, 0.3);
  @include trailer(1.5);
  @include trailing-border;
  @include leader(1.5);
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

我不知道我在这里做错了什么。请帮助我了解此属性。

---

链接：

• http://compass-style.org/reference/compass/typography/vertical_rhythm/#mixin-trailing-border
• http://www.youtube.com/watch?v=ls3Clk-kz3s&feature=player_detailpage#t=464s

Answer 1

这里有几个问题。

1) 浏览器应用您需要覆盖或重置的默认顶部/底部边距。完整的<hr/> 重置如下所示：

hr {
  border: 0;
  height: 0;
  margin: 0;
}

2) 重置后，trailing-border mixin 将起作用（我已将黄色留在原处，因此您可以看到它添加的填充以及边框）：

hr {
  @include trailing-border; // adds padding-bottom and border-bottom properties
  background: rgba(yellow, .3); // shows in the padding
}

您也可以在此处添加您的leader 和trailer。这将有助于创建一条适合节奏并在其周围留出空间的单行，但我认为这不是你想要做的。

3) 通过将顶部和底部边框设置为不同颜色，您似乎想要一个双色调边框。这可以工作，但你不想使用trailing-border。事实上，垂直节奏中没有任何 mixin 可以帮助您解决这个问题 - 您必须手动完成。通过添加两个 1px 的边框，你知道你正在打破 2px 的节奏。所以只要把那些 px 拿回来，你就可以开始了：

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: -2px 0 0 0;
}

您可以从顶部或底部减去这 2 像素，并且可以将前导或尾随添加到另一侧（但不能同时添加）。您必须从文章的页边空白处获得额外的空间。

Answer 2

我也有类似的问题。

就我而言，我的基本字体大小为 12 像素，基线为 18 像素。

正如 Eric 所说，“通过添加两个 1px 的边框，你就知道你正在打破 2px 的节奏”。

这就是 leading-border 和 trailing-border mixin 可以帮助您的地方。

1. leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)

2. trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)

不幸的是，默认情况下，这些 mixin 会将边框与填充相结合，但没有边距（我的 hr 标签需要的顶部和底部边框各为 1px）。

我所做的是覆盖默认 mixins 以添加边距属性（不确定这样做是否是个好主意）：

@function rhythm($lines: 1, $font-size: $base-font-size, $offset: 0) {
    @if not $relative-font-sizing and $font-size != $base-font-size {
        @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function";
    }

    $rhythm: $font-unit * ($lines * $base-line-height - $offset) / $font-size;

    // Round the pixels down to nearest integer.
    @if unit($rhythm) == px {
        $rhythm: floor($rhythm);
    }

    @return $rhythm;
}

/*override original apply-side-rhythm-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {

    @if not $relative-font-sizing and $font-size != $base-font-size {
        @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"; }

    border-#{$side}: {
        style: $border-style;
        width: $font-unit * $width / $font-size; };

    #{$property}-#{$side}: rhythm($lines, $font-size, $offset: $width);
}

/*override original leading-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {
    @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style, $property);
}

/*override original trailing-border mixin to include property variable - now you can use padding or margin for adding whitespace*/
@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style, $property: padding) {
    @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style, $property);
}

现在我的 hr 标签：

hr {
    @include leading-border($property:margin);
    @include trailing-border($property:margin);
    border-bottom-color: #353535;
    border-top-color: #0d0d0d;
}

将编译为：

hr {
    border-bottom: 0.083em solid #353535;
    border-top: 0.083em solid #0D0D0D;
    margin-bottom: 1.417em;
    margin-top: 1.417em;
}

而且我的垂直节奏不再中断。

试一试，如果它有效，请告诉我。