Susy嵌套网格

时间:2013-04-03 01:22:21

标签: ruby-on-rails sass compass-sass susy-compass

我创建了一个susy网格,并尝试将其用于复杂的嵌套导航。我遇到的问题是我希望在标题范围内有一个0em $ gutter-width(我正在使用导航的标签),但在整个页面的其余部分,我想要一个1em的天沟。我的导航栏是100%的屏幕宽度,理想情况下可以顺利处理十进制列。

以下是我正在使用的内容:

标题

$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

mixin(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?

1 个答案:

答案 0 :(得分:4)

有几种选择。

1)如果你没有排水沟,你不需要Susy。数学很简单,你不必担心十进制列。

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

2)您可以使用with-grid-settings() { ... } mixin将任何代码块包装在您选择的不同网格中。也许是这样的:

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

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

如果您只是根据需要更改上下文,则永远不会有小数列。