1

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

4

1 回答 1

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

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

于 2013-04-03T21:13:48.440 回答