1

Bourbon Neat では、span-column()mixin と一緒にmixin を使用して、foundation 5 のブロック グリッドに似たものomega()を作成できます。automatic columnsただし、メディア クエリ間でスタイルを共有する場合、これらは惨めに失敗するようです。以下の例を見てください。

.blocks { 
    @include media($iphone) {
       @include span-column(4);
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
}

nth-child の位置を使用して行の最後の項目からマージンを削除しますが、メディア クエリが発生したときに、オメガを変更している場合、他の CSS は上書きされません。したがって、最初のメディア クエリは期待どおりに機能します。次に、$ipadクエリがトリガーnth-child(3n)されると、CSS に残り、クエリが中断され$ipadます。これを回避する方法はありますか？

コンパイル済み CSS:

.block-grid > li {
  float: left;
  display: block;
  margin-right: 2.68967%;
  width: 48.65516%;
}
.block-grid > li:last-child { margin-right: 0; }
.block-grid > li:nth-child(2n) { margin-right: 0; }
.block-grid > li:nth-child(2n+1) { clear: left; }

@media screen and (min-width: 1024px) {
  .block-grid > li {
    float: left;
    display: block;
    margin-right: 2.68967%;
    width: 31.54022%;
  }
  .block-grid > li:last-child { margin-right: 0; }
  .block-grid > li:nth-child(3n) { margin-right: 0; }
  .block-grid > li:nth-child(3n+1) { clear: left; }
}
4

2 に答える 2

4

これに対処する「オメガ リセット」ミックスインがあります: http://joshfry.me/notes/omega-reset-for-bourbon-neat/

これは次のことを行います:

@mixin omega-reset($nth) {  
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}

したがって、元の質問のコードを修正するには、omega-reset mixin を適切な場所に配置して、次のようにします。

.blocks { 
    @include media($iphone) {
       @include span-column(4);
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega-reset(3n);  //added to reset previous omega value
       @include omega(4n);
    }
}
于 2014-05-12T22:04:27.757 に答える
1

Bourbon/Neat でこれにどのようにアプローチするかは、ミックスインがどのように機能するかに依存する必要があります@media。目的の出力は次のようになります。

.block-grid > li {
  float: left;
  display: block;
  margin-right: 2.68967%;
  width: 48.65516%;
}
.block-grid > li:last-child { margin-right: 0; }
@media (max-width: 1024px) {
    .block-grid > li:nth-child(2n) { margin-right: 0; }
    .block-grid > li:nth-child(2n+1) { clear: left; }
}

したがって、$ipadが単なるピクセル値である場合、これを達成する最も簡単な方法は、その変数を使用して手動でメディア クエリを書き出すことです。

.block-grid > li {
    @include media($iphone) {
       @include span-column(4);
    }
    @media (max-width: $ipad) {
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
 }

それが関数の結果である場合は、new-breakpoint()max-width を使用して別のメディア クエリ コンテキストを作成する必要があります (ソース/例を見て収集できるものだけを使用しているので、許していただく必要があります)。これが正しくない場合は私に連絡してください）：

$smaller-than-ipad: new-breakpoint(max-width 500px 12); // 12 = total columns, optional

.block-grid > li {
    @include media($iphone) {
       @include span-column(4);
    }
    @include media($smaller-than-ipad) {
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
 }
于 2014-04-29T23:39:48.563 に答える