1

サブピクセルの丸めエラーをかなりの時間解決しようとしましたが、これまで何度も何度も失敗しました。私は、サスとスージーの助けを借りて、その努力を成し遂げようとしています。前回の試行で使用した mixin は、Github の Susy issue tracker から取得しました (スペース、列を使用し、そこで提案されているように margin-left/right プロパティをプッシュしました):

@mixin isolate($location, $context: $columns, $dir: 'ltr') {
  @if $dir == 'ltr' {
    margin-right: -100%;
    margin-left: space($location, $context);
  }
  @else if $dir == 'rtl' {
    margin-left: -100%;
    margin-right: space($location, $context);
  }
}

私のScssは次のようになります。

.imggrid{
    @include with-grid-settings($gutter: 0.1%){
        $y:2;
        li{
            @include span-columns(2,12);    
            @for $x from 1 through 30
            {
                &:nth-child(#{$x}){
                    @include isolate($y,12);
                    $y: $y + 2;
                    @if $y > 12{
                       $y: 2;
                    }
                }
            }
            @include nth-omega(6n);
        }
    }
}

まず、画像グリッド用のカスタム ガターを作成しました。次に、変数 y を定義して 2 のステップで反復し、分離 mixin (分離 (2,12) 分離 (4,12) など) を呼び出すことができるようにしました。12 より大きい値の場合、値は最終的に for ループ内で 2 にリセットされます。次に、30 枚の画像を歩いている各 li の列にまたがります。繰り返し分離 mixin を呼び出すたびに。for ループの後に @include nth-omega(6n); を追加しました。6 番目の要素ごとに新しい行を取得します。

でも、なぜか全然うまくいかない。最初の 4 行には最初の画像がなく、最後の行には最初の 5 つの要素がありません。どんなアイデアや提案も大歓迎です。ありがとうラルフ

4

1 に答える 1

5

更新: これらのミックスインを 0 インデックスではなく 1 インデックスになるように調整しました。そのほうが一般的だと思います。

あなたは近いですが、数学は完全に正しくありません. すべてをまっすぐに保つのは少し複雑になるので、それを処理するために mixin を作成しました。また、isolate mixin を調整して、既存の Susy$from-direction変数を使用するようにしました。

@mixin isolate($location, $context: $total-columns, $from: $from-direction) {
  $to: opposite-position($from);
  margin-#{$to}: -100%;
  margin-#{$from}: space($location - 1, $context);
}

@mixin isolate-list($columns, $context: $total-columns, $from: $from-direction) {
  $position: 1;
  $line: floor($context / $columns);

  @include span-columns($columns, $context, $from: $from);

  @for $item from 1 through $line {
    $nth: '#{$line}n + #{$item}';
    &:nth-child(#{$nth}) {
      @include isolate($position, $context, $from);
      @if $position == 1 { clear: $from; }

      $position: $position + $columns;
      @if $position > $context { $position: 1; }
    }
  }
}

span-columns、 width & contextと同じように使用してください。それだけです：

.imggrid{
  li{
    @include isolate-list(4,12);
  }
}

これは、任意の数のリスト項目に対して、任意のコンテキストで、任意の幅で機能するはずです。乾杯！

于 2013-03-13T07:47:07.260 に答える