0

いくつかの例では、グローバル変数に応じて要素の幅が変化するスコープを定義するのは非常に簡単でした。Susy 2 を学習しようとしていますが、ブレークポイント統合でどのように機能するかを実際に理解することはできません。

アーカイブしたいものを指摘するために、ここにいくつかの疑似コードを作成しました

Susy SASS マップ

$small: (
    columns: 4,
);

$medium: (
    columns: 18,
);

$large: (
    columns: 24,
);

HTML要素

.foo {

    span 2

    at medium
        span 6

    at large
        span 12

}

.foo に求める結果

  • 小さい = 50% (ガターを除く)
  • 中 = 33,3333% (ガターを除く)
  • 大= 50％（ガターを差し引いたもの）

これをどのようにアーカイブしますか？いくつかのチュートリアルを見てきましたが、これについては触れていません。この質問は、似たようなことについて話します。Susy にどのレイアウトを使用するかを常に伝えなければならないのでしょうか? もちろん言うこともできますが、グリッドをグローバルに定義し、すべての時間x **of** somethingをスキップするのは非常に便利であることがわかりました。

4

1 に答える 1

1

Susy 2 では、Susy 1 で行ったのとほぼ同じ方法でこれを行うことができます。構文はもう少し明示的ですが、考え方は同じです。at-breakpointSusy 1 で使用していたと仮定するとsusy-breakpoint、Susy 2 で使用します [ドキュメントを参照]:

$small: 4;
$medium: 18;
$large: 24;

// Susy 1    

$columns: $small;

.foo {
  @include span-columns(2);

  @include at-breakpoint($medium) {
    @include span-columns(6);
  }

  @include at-breakpoint($large) {
    @include span-columns(12);
  }
}

// Susy 2

@include layout($small);

.foo {
  @include span(2);

  @include susy-breakpoint(container($medium), $medium) {
    @include span(6);
  }

  @include susy-breakpoint(container($large), $large) {
    @include span(12);
  }
}

container()必要に応じて、引数を独自のブレークポイントに置き換えることができます。コンテナー関数を使用したのは、Susy 1 が既定でブレークポイントを設定する方法を模倣するためです。それは少し魔法が少なく、もう少し明示的で、はるかに強力です. これで、メディア クエリを定義するために使用できるブレークポイントの機能がすべて利用できるようになりました。

于 2014-06-06T17:22:22.030 に答える