0

私はついに Susy One から Susy 2 に移行しようとしていますが、新しい構文に少し苦労しています。具体的には、Breakpoint mixin で使用します。

Susy One では、次のようなことがありました。

// Mobile First Settings

.grid-construct{
  $total-columns: $bp-sm-columns;
  $column-width: $bp-sm-column-width;
  $gutter-width: $bp-sm-gutter-width;
  $grid-padding: $bp-sm-grid-padding;
  $container-width: $bp-sm-container-width;
  $container-style: $bp-sm-container-style;

  @include container; 
}


//for medium devices

@include breakpoint($breakpoint-md) {
  .grid-construct {
    $total-columns: $bp-md-columns;
    $grid-padding: $bp-md-grid-padding;

    @include container;
  }
}


// large devices

@include breakpoint($breakpoint-lg) {
  .grid-construct {
    $total-columns: $bp-lg-columns;
    $grid-padding: $bp-lg-grid-padding;

    @include container;
  }
}

その後、次のようなスタイルを書くことができました。

.my-style{
  margin-top: 10px;

  @include breakpoint($breakpoint-md) {
    margin-top: 20px;
  }

  @include breakpoint($breakpoint-lg) {
    margin-top: 40px;
  }
}

私の HTML マークアップの例:

<div class="grid-construct">
  <div class="my-style">
    Lorem ipsum
  </div>
</div>

このパターンは Susy 2 に移植できますか? $susy3 つのそれぞれのブレークポイントに対して 3 つの個別のマップを作成する必要がありますか?

4

1 に答える 1

0

あなたの例では、さまざまなブレークポイントで変更されるのは、合計列数に基づくコンテナーのサイズだけです (grid-padding自分で簡単に追加できるため、Susy 2 にはありません)。$susy必要に応じて基本マップを設定した場合は、省略形を使用してそれをオーバーライドできます。

.grid-construct {
  @include container;

  @include breakpoint($breakpoint-md) {
    max-width: container($bp-md-columns);
  }

  @include breakpoint($breakpoint-lg) {
    max-width: container($bp-lg-columns);
  }
}

container（実際にオーバーライドする必要があるのは max-width だけなので、この関数を使用しました）

susy-breakpointを使用して、ブレークポイント ブロック全体の設定を変更することもできます。

@include susy-breakpoint($breakpoint-lg, $bp-lg-columns) {
  @include container;
}
于 2015-08-18T20:16:04.610 に答える