CODEWITHSUNDEEP
ruby-on-railssasscompass-sasssusy-compass
JonMorehouse
JonMorehouse

Reputation: 1383

Susy Nested Grids

I created a susy grid and am trying to use it for a complex nested navigation. The problem I'm having is that I want to have a 0em $gutter-width in the scope of the header (tag where I'm working with navigation), but throughout the rest of the page, I want to have a 1em gutter. My navigation bar is 100% screenwidth and ideally would be able to handle decimal columns smoothly.

Here's what I'm working with:

header 

$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

The mixin (horizontal_ul_structure): Right now the nesting works well, the hover ul should be 100% width. Thus I'm making it 12 columns in the context of 1 column. 

@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

Here if you notice the anchor tag hack I'm working with essentially expands the anchor tag past the li element a bit to prevent the gutter which I don't work.

Is there any way that I could get rid of this gutter width and then have another grid for a different part of my application?

Is there anyway to namespace the susy config?

Upvotes: 1

Views: 725

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

There are several options.

1) If you don't have gutters, you don't need Susy. The math is simple, and you don't need to worry about decimal columns. 

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

2) You can use the with-grid-settings() { ... } mixin to wrap any chunk of code in a different grid of your choice. Maybe something like this:

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

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

You'll never have decimal columns if you just change the context to match your needs.

Upvotes: 4

Related Questions