Susy嵌套网格

Question

我创建了一个susy网格，并尝试将其用于复杂的嵌套导航。我遇到的问题是，我想在页眉的作用域中有一个0em $的间隔宽度(我使用导航的标记)，但是在页面的其余部分，我想有一个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 (horizontal_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);
    }
  }    
}

如果您只是根据需要更改上下文，您将永远不会有十进制列。