2
  1. コンパスは使っていません
  2. Breakpoint.scss を使用したい
  3. Susy 2.0 を使用しています

この質問に関する投稿がたくさんあることは知っていますが、このトピックに関して何も見つけることができませんBreakpoint.scssでしSusy 2.0た。

@import "susy";
@import "breakpoint";

$medium: 800px;

$susy: (
  columns: 6,
  gutters: 3/4,
  gutter-position: split
);

@include breakpoint($medium) {
  $susy: layout(12 1/4 split);
}

body {
  @include container(show);

  @include breakpoint($medium) {
    @include container(show);
  }
}

使用する必要がありますsusy-breakpointか、またはこのようなことを達成できますか? 800px 以下で 6 列、800px 以上で 12 列が必要です

私は DRY を維持しようとしているので、スタイルに susy-breakpoint を追加しても役に立ちません。

以下のコードも試してみましたが、どこかにエラーがあり、機能していないと思います。

$susy: layout(6 1/4 split);

$small: 400px, 6 1/4 split;
$medium: 800px, 8 1/4 split;
$large: 1000px, 12 1/4 split;

@mixin media($size) {
  @include susy-breakpoint($size...) {
    @content;
  }
}

body {
  @include container(show);

  @include media($small) {
    @include container(show);
  }

  // debugging. didnt work either
  @include susy-breakpoint($small...) {
    @include container(show);
  }
}
4

1 に答える 1

3

あなたの mixin が何をするかわからないmediaので、それに関連することについてコメントすることはできません。Sass、CSS、およびそのための Susy が DOM またはメディアクエリ間の関係を認識していないため、最初の例は機能しません。$susy1 つのメディア クエリ内の値を変更しても、同様のすべてのメディア クエリ コンテキストに反映されるわけではありません。そのため、ブレークポイントでレイアウト コンテキストを変更するたびに、メディア クエリと目的のレイアウトの両方を設定する必要があります。

susy-breakpointそれを行う唯一の方法ではありませんが、最短です。ロングハンドは次のとおりです。

body {
  @include container(show);

  @include breakpoint(800px) {
    @include with-layout(8) { // default is set to 8-columns
      @include container(show);
    } // default is returned to global setting
  }
}

$smallデフォルトのレイアウトと同じであるため、ブレークポイントは現在何も変更されていません。より大きなものは、ネストされたコードのレイアウト コンテキストを変更します — ただし、単純化できます: 「1/4 分割」ガターはまったく変更されないため、すべてのブレークポイントで再度記述する必要はありません。

$susy: layout(6 1/4 split);
$medium: 800px, 8;

body {
  @include container(show);

  @include susy-breakpoint($medium...) {
    @include container(show);
  }
}

それは上記のロングハンドと同じです。

于 2014-05-31T22:19:24.483 に答える