Susy 嵌套网格

Question

我创建了一个 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

如果你注意到我正在使用的锚标记 hack 基本上将锚标记扩展到 li 元素之外，以防止我不工作的排水沟。

有什么办法可以去掉这个间距宽度，然后为我的应用程序的不同部分设置另一个网格？

是否有命名 susy 配置的命名空间？

Answer 1

有多种选择。

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);
    }
  }    
}

如果您只是更改上下文以满足您的需要，您将永远不会有小数列。