css - Susy: 画面サイズに応じて列数を変更する

Question

Compass/Sass プラグインのSusyでは、_base.scss ファイルで列数を設定します。

デスクトップ ビューの場合、12 列が望ましいです。ただし、これはモバイル ビューには列が多すぎます。モバイル表示の列数を変更する方法はありますか?

(レスポンシブ Web デザインを作成しているため、サイトのデスクトップ バージョンとモバイル バージョンの両方が同じ _base ファイルを共有します)。

ありがとう！

Answer 1

更新: Susy 1.0 には、at-breakpointmixin を使用してこの機能が組み込まれています。公式サイトのドキュメントを参照してください。

はい、できます！この機能を Susy のコアに組み込む作業を進めていますが、当面は自分で行う必要があります。これが私のアプローチです（最新の Compass と Sass alpha が必要です）：

// for mobile layouts
$total-cols: 4;

.container {
  @include container;
}

// for desktops
@media all and (min-width: 30em) {
  $total-cols: 12;

  .container {
    @include container;
  }
}

ブレークポイントごとに必要に応じて繰り返します。簡単な mixin を作成して、次のことを支援することもできます。

@mixin desktop() {
  @media all and (min-width: 30em) {
    $current-total: $total-cols; // remember current column setting
    $total-cols: 12;             // change column setting for new context

    @content;                    // apply content with new column-count

    $total-cols: $current-total; // return original column setting
  }
}

.container {
  @include container;

  @include desktop {
    @include container;
  }
}