Sass 在罗盘垂直节奏模块中尝试建立第二条基线时,两条基线的线高相同

Sass 在罗盘垂直节奏模块中尝试建立第二条基线时,两条基线的线高相同,sass,compass-sass,vertical-rhythm,Sass,Compass Sass,Vertical Rhythm,到目前为止,我使用的是Compass 0.12.x,我有一个用于切换Compass垂直节奏模块基线的混音器。当我尝试将该混合应用于Compass v1.0.1时,两条基线的线高度保持不变。简化后的代码如下所示: @import 'compass'; @mixin use-baseline($new-base-size, $new-line-height) { // Save the baseline context $initial-font-size: $base-font-

到目前为止,我使用的是Compass 0.12.x,我有一个用于切换Compass垂直节奏模块基线的混音器。当我尝试将该混合应用于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);
    }
}
相应的笔是。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; }
}
在罗盘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;
}
那么是什么导致罗盘1.0.1返回相同的线高度呢?舍入作为一个理由是没有意义的,因为如果输入更多不同的行高度值,如100px和25px,两条基线的输出仍然是相同的,请参见

更新: 好吧,我终于明白了。事实证明,这种行为是由于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;
}