我创建了一个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?
答案 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);
}
}
}
如果您只是根据需要更改上下文,则永远不会有小数列。