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

Question

我试图了解垂直节奏并阅读一整天，尝试了几件事，但我的布局不断中断，因为我未能正确应用指南针填充拖车，如您在屏幕截图中看到的那样：

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

这是我的代码：

HTML：

<article>…&lt;/article>
<hr/>
<article>…&lt;/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 造型。

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

！截图2

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

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

链接：

score 4 · Accepted Answer

你在这里有几个问题。

1) 浏览器应用您需要覆盖或重置的默认顶部/底部边距。完全<hr/>重置看起来像这样：

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

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

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

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

score 0 · Accepted Answer

我有类似的问题。

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

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

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

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以添加边距属性（不确定这样做是否是个好主意）：

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

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

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

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

链接：

2 回答 2

Related

Reference