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（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

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

有什么方法可以摆脱这个装订线宽度，然后为我的应用程序的另一部分设置另一个网格？

无论如何命名susy config？

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

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

Susy嵌套网格

1 个答案: