0

ファウンデーションフレームワーク（http://foundation.zurb.com/）を使用して小さなサンプルグリッドを作成しました。グリッドは、デスクトップモードの4つのフローティング要素で構成されています（_setting、$ rowWidth 1140px）

*マークアップ

 <div id="container">
    <div id="main">
       <div id="column">

* scss

   #container{
        @include outerRow(); 
    }
   .column{
        @include column(3);
    }

これらのソースに基づく上記のミックスイン：http：//foundation.zurb.com/docs/sass-mixins.php

次に、タブレットでポートレートモードで例を表示するときに、列の構造を変更します。私はこのようなものを作りました：

@media screen  and (min-width: 768px) and (orientation: portrait) {

    #container{
      @include outerRow(); 
    }
   .column{
          @include column(6);
    }

}

次のエラーが発生します。

>     DEPRECATION WARNING on line 21 of /Library/Ruby/Gems/1.8/gems/zurb-foundation-3.2.3/scss/foundation/mixins/_semantic-grid.scss:
>       @extending an outer selector from within @media is deprecated.
>       You may only @extend selectors within the same directive.
>       This will be an error in Sass 3.3.
>       It can only work once @extend is supported natively in the browser.

ファンデーションベースのプロジェクトで、さまざまなメディアクエリごとに列構造を再定義するための作業方法を教えてもらえますか？

4

1 に答える 1

3

一般的に言えば、必要なことは%clearfix、メディア クエリ内のように拡張ミックスインを再定義することだけです。これらのクラスが別のファイル内で定義されている場合、ファイルのインポートも機能します (if/else ステートメントのような何らかの制御ブロック内に配置していない場合)。

プロジェクトのソースを見ると、あなたがしようとしていることはおそらくそのようにすべきではありません (参照: https://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic- grid.scss )

サンプル コードで参照されている mixin はどちらも独自のメディア クエリを生成するため、同じ要素でそれらを 2 回呼び出すことは避けてください。そうしないと、多くの重複した未使用の CSS が作成されます。代わりに、実際に変更が必要なプロパティを上書きするだけです。

.exampleA {
    @include outerRow();

    @media screen and (min-width: 768px) and (orientation: portrait) {
        // do not @include outerRow() again here!
        // these are the only properties that are variable in the outerRow() mixin:
        width: $tabletWidth;
        min-width: $tabletMinWidth;
    }
}

もう 1 つ理解する必要があるのは、一度定義した.mixin$totalColumnsを使用するときに、それに固執することです( https://github.com/zurb/foundation/blob/master/scss/foundation/mixinsを参照)。 /_semantic-grid.scss#L64およびhttps://github.com/zurb/foundation/blob/master/scss/foundation/mixins/_semantic-grid.scss#L19 )。デフォルトで合計 6 つの列を持つことはできませんが、タブレットでは 4 つになります。これを可能にする必要がある場合は、関数を自分で実行するだけです。columngridCalc()

.exampleB {
    @include column(6);

    @media screen and (min-width: 768px) and (orientation: portrait) {
        width: gridCalc(2, 6); // columns, totalColumns
    }
}

$totalColumnsメディア クエリの数に問題がない場合は$totalColumns、2 番目の引数として渡します。

于 2012-12-27T21:29:24.113 に答える