5

私は会社のレスポンシブ Web サイトを構築しており、SASS と Foundation 4 CSS Framework の両方を初めて使用しています。ここまでは順調ですね。ただし、ここでミックスインに「問題」があります。大きなビューでサイズ 6、小さなビューでサイズ 3 の列が必要な場合は、組み込みの CSS クラスを使用できます。

 class="large-6 small-3 columns"

Foundation SASS ミックスインを介してこれを行う方法はありますか? ここで見つけた列の唯一のミックスインは

@include grid-column($columns, $last-column, $center, $offset, $push, $pull, $collapse, $float);

そして、私が得たものについては、ここで veiwports を指定できません。

何かご意見は？前もって感謝します

4

5 に答える 5

2

しかし、私が知りたかったのは、このための SASS ミックスインが組み込まれているかどうかです。ただし、@media の設定を確認して、自分で実装してみます。

いいえ、そうではありません。:( ドキュメントを参照してください: http://foundation.zurb.com/docs/media-queries.html

しかし、何も発明する必要はありません！Snugugによる美しい応答コンパス拡張機能を使用するだけです。

応答先の readme に記載されている名前でメディア クエリを呼び出すだけでなく、番号でメディア クエリを起動することもできます。

きれいにインデントされた構文の例:

// Declaring the breakpoint ranges
$breakpoints: 'xs' (0 400px), 's' (401px 600px), 'm' (601px 800px)

// Declaring a function to retrieve a breakpoint by number
@function bp($number)
  @return nth(nth($breakpoints, $number),1)

// Calling a media query traditionally by a name
.bar
  +respond-to('s')
    @include grid-column(6)

// Calling a media query by its number
.foo
  +respond-to(bp(2))
    @include grid-column(6)

わーい！

于 2013-03-28T15:59:38.920 に答える
1

Sass Mixin では、メディア クエリを使用してグリッドを明示的に変更する必要があります。私がこれにアプローチした方法は、Mobile First サイトを作成してから、グリッドを定義する Sass コードを次のように 2 つのメディア クエリに複製することです。

// Mobile Grid
@media only screen and (max-width: 768px) { ... }
// Desktop & Tablet Grid
@media #{$small} { ... }

これがどのように機能するかの明確な例は見つかりませんでした。私が収集したものから、Sass でグリッドを定義し、メディア クエリのみでそれをオーバーライドできるはずですが@media #{$small} {}、実際には機能しませんでした。他のグリッドの前、後などにメディアクエリを実行しようとしましたが、その結果、最初にグリッドを設定したときにそのままの状態になりました。

より長い例を次に示します。の場合、#dashboardモバイルではスタッキングして中央に配置し、デスクトップ/タブレットでは 3 列に配置します。これはclass="small-10 small-centered large-4 columns"、プレゼンテーションクラスを使用するためのものです。

// Mobile Grid
@media only screen and (max-width: 768px) {
  #dashboard { @include grid-row;
    & > #stats { @include grid-column(10, false, true); }
    & > #records { @include grid-column(10, false, true); }
    & > #results { @include grid-column(10, false, true); }
  }
}

// Desktop & Tablet Grid
@media #{$small} {
  #dashboard { @include grid-row;
    & > #stats { @include grid-column(4, false, false); }
    & > #records { @include grid-column(4, false, false); }
    & > #results { @include grid-column(4, false, false); }
  }
}

注: これを拡張し、ミックスインを使用してブレークポイントを増やすこともできますが、これはデフォルトの Zurb F4 プレゼンテーション クラスの動作をシミュレートしているようです。

于 2013-03-30T18:31:40.953 に答える
1

これらについては、セマンティック クラスを使用する必要があります。

class="something-descriptive"

あなたのサスには、次のようなさまざまなサイズのさまざまなミックスインが含まれています。

.something-descriptive {
    @include grid-column(3)
}

@media screen and (min-width: 700px) {
    .something-descriptive {
        @include grid-column(6)
    }
}
于 2013-03-28T09:02:04.423 に答える