Compass Vertical Rhythm - HR-теги разбивают вертикальную сетку

Я пытаюсь понять вертикальный ритм и читаю целый день, перепробовал несколько вещей, но мой макет не работает, потому что я не могу правильно применить трейлер компаса, как вы можете видеть на скриншоте:

! Скриншот

  • Строка с желтым фоном - это мой тег 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);
}

Я не знаю, что я делаю здесь не так. Пожалуйста, помогите мне понять это свойство.

Ссылки:

Источник

2 ответа

Решение

У вас есть несколько проблем здесь.

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. Так что просто верните эти пиксели обратно, и все готово:

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 сверху или снизу, и вы можете добавить лидера или трейлера на другую сторону (но не оба). Вместо этого вам придется получить дополнительное пространство от полей на полях.

Источник

У меня были похожие проблемы.

В моем случае базовый размер шрифта составляет 12 пикселей, а базовый - 18 пикселей.

Как сказал Эрик, "добавляя две границы 1px, вы знаете, что вы нарушаете ритм на 2px".

Это где leading-border а также trailing-border Mixins может помочь вам.

  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)

К сожалению, по умолчанию эти миксины будут комбинировать границы с отступами, но без полей (что мне было нужно для моего тега hr с верхней и нижней границей в 1 пиксель каждый).

Я переопределил миксины по умолчанию, добавив свойство 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;
}

И мой вертикальный ритм больше не нарушается.

Попробуйте и дайте мне знать, если это работает.

Источник
Другие вопросы по тегам