При попытке установить вторую базовую линию в модуле Compass Vertical Rhythm, высота линии одинакова для обеих базовых линий.
До сих пор я использовал Compass 0.12.x, и у меня был рабочий миксин для переключения базовых линий для модуля Compass Vertical Rhythm. Когда я пытаюсь применить этот миксин к Compass v1.0.1, высота строки для двух базовых линий остается неизменной. Сокращенный код выглядит так:
@import 'compass';
@mixin use-baseline($new-base-size, $new-line-height) {
// Save the baseline context
$initial-font-size: $base-font-size;
$initial-line-height: $base-line-height;
// Apply the new context
$base-font-size: $new-base-size;
$base-line-height: $new-line-height;
@content;
// Go back to the baseline context
$base-font-size: $initial-font-size;
$base-line-height: $initial-line-height;
}
$vr-base-font-size: 20px;
$vr-base-line-height:28px;
$vr-750-font-size: 26px;
$vr-750-line-height:37px;
$vr-750: $vr-750-font-size $vr-750-line-height;
$base-font-size: $vr-base-font-size;
$base-line-height: $vr-base-line-height;
@include establish-baseline($vr-base-font-size);
@media screen and (max-width: 750px) {
@include use-baseline($vr-750...) {
@include establish-baseline($vr-750-font-size);
}
}
Соответствующей ручкой является http://codepen.io/rpkoller/pen/lrBHK. Результирующий код в Compass 1.0.1:
html {
font-size: 125%;
line-height: 1.4em;
}
@media screen and (max-width: 750px) {
html {
font-size: 162.5%;
line-height: 1.4em; }
}
В Compass 0.12.x это было
html {
font-size: 125%;
line-height: 1.4em;
}
@media (min-width: 46.875em) {
html {
font-size: 162.5%;
line-height: 1.42308em;
}
Так в чем же причина того, что Compass 1.0.1 возвращает одинаковую высоту строки? Округление в качестве причины не имеет смысла, потому что, если вы вводите более разные значения высоты строки, например 100px и 25 px, выходные данные остаются одинаковыми для обеих базовых линий (см. http://codepen.io/rpkoller/pen/qjdsa).
Обновление: Хорошо, я наконец понял вещи. Оказалось, что поведение было связано с изменениями, внесенными в Sass 3.4. Вы должны изменить use-baseline mixin соответственно:
@mixin use-baseline($new-base-size, $new-line-height) {
// Save the baseline context
$initial-font-size: $base-font-size;
$initial-line-height: $base-line-height;
// Apply the new context
$base-font-size: $new-base-size !global;
$base-line-height: $new-line-height !global;
@content;
// Go back to the baseline context
$base-font-size: $initial-font-size;
$base-line-height: $initial-line-height;
}