Question

我正在尝试理解垂直节奏并阅读整天，尝试了几件事，但我的布局一直在破坏，因为我无法正确应用指南针填充预告片，如您在屏幕截图中看到的那样：

黄色背景的行是我的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);
}

为了保持简单，我评论了我的人力资源风格。

这是另一个间隙更明显的例子：

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

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

链接：

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。事实上，没有来自垂直节奏的混音可以帮助你解决这个问题 - 你必须手动完成。通过添加两个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;
}

您可以从顶部或底部减去这些2px，并且可以将领导者或预告片添加到另一侧（但不能同时添加两者）。你必须从文章的边距中获得额外的空间。

Answer 2

我有类似的问题。

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

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

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

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

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

我所做的是覆盖默认的mixins以添加margin属性（不确定是否是一个好主意或不执行此操作）：

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

我的垂直节奏不再破坏了。

尝试一下，让我知道它是否有效。

指南针垂直节奏 - HR标签打破垂直网格

链接：

2 个答案: