0

したがって、susy2 の非常に便利な「ギャラリー」ミックスインは、IE8 では機能しない nth-child セレクターを使用します。それで、良い回避策は何ですか？

ギャラリー mixin を拡張し、ie8 固有のスタイルを追加することを考えていました。それはsusyで可能ですか？

それが役立つ場合、これが私のsassコードです：

.grid_gallery li.slide {
  @include gallery(12 of 24); //2 across
  margin-bottom: gutter(24);
  @include breakpoint(600px) {
    @include gallery(6 of 24); //4 across
  }
  @include breakpoint(769px) {
    @include gallery(4.8 of 24); //5 across
  }
  @include breakpoint(1200px) {
    @include gallery(4 of 24); //6 across
  }
}

この SASS (簡略化) が css に変換されていることを確認するための Gist は次のとおりです。

これが私が目指している外観です： ギャラリールック

4

2 に答える 2

0

わかりました、特にギャラリー ミックスイン内で IE8 のスタイルを書き、「内側」ガターに切り替えたかったのですが、その方法がわかりませんでした。

代わりに、IE スタイルシートに以下を追加しました。

.ie8 .grid_gallery li.slide {
  @include span(4 of 24 inside); // ie8 needs to switch to an 'inside' gutter system. It doesn't handle nth-child css
}

したがって、このスパン ミックスインは、以前に呼び出されたギャラリー ミックスイン スタイルの一部に追加されます。基本的にはIE8のみガター内設定に変更。

また、cms によって生成されるアイテムの数が不明な場合や、html で行ごとに最後の要素を設定できない場合など、本当に必要な場合にのみギャラリー mixin を使用するように切り替えました。

于 2014-07-22T21:59:56.333 に答える
0

もちろん。nth-child セレクターを使用しない出力が必要です。これには、マークアップに追加のクラスが必要になります。Susy から完全なギャラリー ミックスインをコピーして貼り付けることから始め、次にミックスイン名のみを変更し (競合しないように)、 nth-child の言及をクラスの命名規則に置き換えます (62 ～ 63 行目)。 . Susy の既存の nth-child パターンに一致するクラス名を設計できれば、mixin をあまり変更する必要はありません。

このオプションを既存の mixin に追加することさえ可能かもしれません。GitHub でお気軽に問題を報告してください。調査いたします。

更新: よく見ると、必要なものに応じて、より単純なオプションがいくつかあります。ギャラリー宣言を単純なスパンに変更する場合、.last各行の最後の項目にクラス/ミックスインを追加するだけで済みます。ガターを に変更した場合inside、inside-staticまたはそれsplitを行う必要さえありません。単純なスパンは、それ自体で正しくスタックされます。

.item {
  @include span(12 of 24 inside); // 2 across

  @include breakpoint(600px) {
    @include span(6 of 24 inside); // 4 across
  }

  // etc...
}
于 2014-07-10T18:43:52.107 に答える