2

コンテナのデフォルトのガター値をベース値でオーバーライドすることは可能ですか？たとえば、次のようになります。

$total-columns: 12;
$column-width: 60px;
$gutter-width: 20px;
$grid-padding: 10px;

必要に応じて、ガターを20pxからたとえば5px、またはその他の必要な値に最小化できるようにします。

.example{
    @include squish(1,1);
    li{
        @include span-columns(2,10);
        @include nth-omega(5n);
      }
}

ミックスインを介して可能ですか、別のコンテナ/レイアウトを配置する必要がありますか、それともそのタスクを解決するためにプレーンCSSを使用する必要がありますか？ありがとう

更新： より具体的には、樋の正確なサイズを探していません（これまで読んだ限り、丸めのため、とにかく難しいでしょう）、樋を最小化して列を拡大したいだけです間接的に幅。

https://dl.dropbox.com/u/8578/Boxes.png

現時点では、含まれている7つの列とその側溝の前後に3つの列を押しつぶしました。これまでのところ、列とその画像の幅が小さすぎます。そのため、ガター幅を縮小し、列幅を間接的に拡大したいと思いました。

スージーの設定はそのように見えます：

$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;

コンテナはページ全体のラッパー内にあるため、コンテナの幅はこれまで設定していません。

.wrapper {
    @include container;
    overflow-x: hidden;
    width:100%;
    max-width: 100%;
}

スクリーンショットに示されている画像マトリックスの特定のセレクターは次のとおりです。

.projects {
    @include squish(3,3);
    li {
        @include span-columns(2,14);
        @include nth-omega(7n);
    }
}

詳細が必要ですか？それでも、その問題を解決するためにwith-grid-settingsミックスインを使用することをお勧めしますか？そして、set-container-widthミックスインは本当に必要ですか？相対的なものを設定した場合、絶対値は必要ないと思いましたか？ありがとうラルフ

アップデート2：

Ufff私は下のコメントで言及された提案された小さな秘密のアプローチを試しました。しかし、これまでのところ、散らかった混沌とした「パッチワーク」のように、きれいな表示を得ることができませんでした...;）全体的に混乱しているようなものです。基本的に、記事の著者は2つのステップを推奨しました。最初に彼は要素を含むコンテンツに-100％のマージンを追加し、次のステップでオブジェクトを元の場所に押し戻しました。長い試行の中での私の最後のセットアップは、現在そのように見えますが、まだ解決策が見えていません。

 .example{
    @include squish(3,3);
    @include with-grid-settings($gutter: 0.1%){
    margin-right: -100%;
        li{
            @include span-columns(6,18);
            @include nth-omega(3n);
            @include pre(9);
        }
    }
}

提案されているように、「li」の包含要素のwith-grid-settingsミックスイン内に配置したmargin-right。しかし、問題は、プレミックスインをどこに配置するか、特にどの番号を含める必要があるかです（スキッシュ番号も考慮に入れる必要があります）？すべてのliで同じ値ですか、それとも画像を個別に水平位置にプッシュするためにforループが必要ですか？そして、li要素内のミックスインの順序は正しいですか？それがどこに置かれるかは重要ですか？スパン列の終わりまたはスパン列とn番目のオメガの間？全体的に私はまだ混乱しています。グリッド、画像マトリックス、スージーはまだ私の脳を回転させ続けています。：/

アップデート3：

ありがとう！私はついにそれを機能させました。最後に、私の解決策について2つの質問があります。

 .test{
    @include with-grid-settings($gutter: 0.1%){
        li{
            margin-right: -100%;
            float:left;
            @include span-columns(6,18);
            @include nth-omega(3n);
            $count:0;
            @for $i from 1 through 9 {
            &:nth-child(#{$i}) {
                $count: $count + 1;
                @include push($count);
                @if $count == 2{ $count: 0;}
                }   
            }   
        }
    }
}

forループのレイアウトにもっとエレガントな方法はありますか？そして第二に、なぜこのバージョンと私が$ countをコメントアウトしたときのバージョンが可能であるのですか：$ count + 1; ステートメントは同じ視覚的な結果につながりますか？実際にコメントアウトされたプッシュ変数の2番目と3番目のカウントアップはありません。$ countなしでそれがとにかく機能する理由はありますか：$ count + 1 ;? ありがとう！

アップデート4： もう少し遊んでみたところ、次のバージョンは魅力のように機能することがわかりました。$ count変数はまったく必要ないようです。また、プッシュ/プレミックスインに含まれる値の増分増加も必要ではないようです。単純な0でうまくいきました。助けてくれてありがとう!!!

  .test{
    @include with-grid-settings($gutter: 0.5%){
        li{
            margin-right: -100%;
            @include span-columns(6,18);
            @include nth-omega(3n);
            @for $i from 1 through 9 
            {
                &:nth-child(#{$i}) 
                {
                    @include push(0);
                }   
            }   
        }
    }
  }

アップデート5

前回のコメントで、アップデート4に示されている例は、一見したところほどうまく機能していないことをすでに述べました。私は今、Palantirの記事からの提案を完全に再構築しようとしました。その下には、ビデオに示されている7x4および3x3マトリックスのscssパーツがあります：https ：//dl.dropbox.com/u/8578/matrix.mov

.7x3{
    @include with-grid-settings($gutter: 0.25%){
        li{
            margin-right: -100%;
            @include trailer(1);
            @include span-columns(2,14);
            @include nth-omega(7n);
            $y: 0;
            @for $x from 1 through 28
            {
                &:nth-child(#{$x}){
                margin-left: ($y * columns(2,14)) + ($y * gutter(14));
                $y: $y + 1;
                @if $y > 6{
                  $y: 0;
                }

                }
            }
        }
    }
}


.3x3{
    @include with-grid-settings($gutter: 1%){
        li{
            margin-right: -100%;
            @include trailer(1);
            @include span-columns(6,18);
            @include nth-omega(3n);
            $j: 0;
            @for $i from 1 through 9
            {
                &:nth-child(#{$i}){
                    margin-left: ($j * columns(6,18)) + ($j * gutter(18));
                    $j: $j + 1;
                    @if $j > 2{
                      $j: 0;
                    }
                }
            }
        }
    }
}

一見するとマトリックスは壊れているように見えますが、ビデオ内のインスペクターを詳しく見ると、両方のマトリックスで各要素が正しい水平位置にプッシュされているように見えます。唯一の問題は、各liが別々の行に含まれていることです。これは私が入手できた最も近いバージョンです。：/今のところ、適切なマトリックスに到達するためにそれらのピースを組み合わせる方法についてはアイデアがありません。フロートと表示プロパティを使って、多かれ少なかれ可能性を試しました。しかし、運はありません。誰かがおそらくヒントを持っていますか？

4

1 に答える 1

1

with-grid-settings()（ドキュメントを参照）を使用してコードをラップできます。

実際のコンテナ幅は変更したくないので、そのままにしておくことができます。.projectsパディング（から）に影響を与えたいかどうかはあなた次第ですが、squish()影響を受けないと仮定します。これが、$gutter-widthsのをli変更するだけです。

@include with-grid-settings($gutter: .5%) {
  li {
    @include span-columns(2,14);
    @include nth-omega(7n);
  }
}

それでおしまい。調整した設定を他に使用したい場合は、ミックスイン内に移動するだけです。

于 2012-10-24T06:35:30.080 に答える