1

Susy グリッドを作成し、それを複雑なネストされたナビゲーションに使用しようとしています。私が抱えている問題は、ヘッダー (ナビゲーションで作業しているタグ) のスコープに 0em $gutter-width を設定したいのですが、ページの残りの部分では 1em のガターを設定したいということです。 . 私のナビゲーション バーは 100% の画面幅で、理想的には 10 進数の列をスムーズに処理できます。

これが私が取り組んでいるものです：

ヘッダ

$container-width: 100%
@include container

// basic div configuration for all of the various horizontal navigations etc 
> div

    // do something here


// do some one off grid math to help with the drop down navigation system
#main

    > ul
        @include horizontal_ul_structure(5,5)
        // approximate the size of the li element
        // 
        > li

ミックスイン (horizo​​ntal_ul_structure): 現在、ネスティングはうまく機能しており、ホバー UL は 100% 幅にする必要があります。したがって、1列のコンテキストで12列にしています。

@mixin horizontal_ul_structure($parent, $elements)

    // best if this works as no decimal otherwise screws up everything!
    $element_size: $parent / $elements
    // assumes that it will be called in the context of a ul
    // span the parent # number of elements across
    @include span-columns($parent)

    // now make sure that the child spans the proper amount of elements with no overflow
    > li
        background-color: gray
        @include span-columns($element_size, $parent)

        &:last-of-type      

            @include span-columns($element_size omega, $parent)

        // do a clever little hack to keep the anchor tags looking correct? 
        > a         

            position: relative
            width: $column-width + $gutter-width
            left: $gutter-padding/2
            height: 100%
            background-color: brown

ここで、私が取り組んでいるアンカータグのハックに気付いた場合、基本的にアンカータグをli要素を少し超えて拡張して、私が機能しないガターを防ぎます。

このガター幅を取り除き、アプリケーションの別の部分に別のグリッドを作成する方法はありますか?

とにかく、susy config の名前空間を指定する方法はありますか?

4

1 に答える 1

4

いくつかのオプションがあります。

1) ガターがない場合、スージーは必要ありません。計算は簡単で、10 進数の列を気にする必要はありません。

li {
  float: left;
  width: percentage($elements/$parent);
  &:last-of-type {
    float: right;
  }
}

2) mixin を使用してwith-grid-settings() { ... }、選択した別のグリッドに任意のコードのチャンクをラップできます。多分このようなもの：

@mixin horizontal_ul_structure($parent, $elements) {
  @include span-columns($parent);

  @include with-grid-settings($elements, $gutter-width: 0) {
    > li {
      @include isolate-grid(1);
    }
  }    
}

ニーズに合わせてコンテキストを変更するだけでは、10 進数の列はありません。

于 2013-04-03T21:13:48.440 に答える