1

これまでのところ、私は Compass 0.12.x を使用しており、Compass Vertical Rhythm モジュールのベースラインを切り替えるための有効な mixin がありました。その mixin を Compass v1.0.1 に適用しようとすると、2 つのベースラインの線の高さが変わりません。削減されたコードは次のようになります。

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

0 に答える 0