Bourbon Neat——网格行为

Question

我正在使用 Bourbon Neat 网格来调整网页上各种 div 的宽度。

default.html

<main class = "default-content">
    {{ content }}
</main>

default.scss

main {
    @include span-columns(6);
}

page.html

此页面的内容将在 default.html

中传送到 {{ content }}

<div class = "full-width">
</div>

page.scss

.full-width {
    @include span-columns(6);
    border: 1px solid #111;
}

预期和期望的结果

<div class="full-width"> 的宽度将是父 div 的全宽。

实际结果

<div class="full-width">的宽度只有父div宽度的一半。

结论

我的印象是子 div 将是父 div 的全宽，因为它们都是 @include span-columns(6)。我的猜测是这不是实际结果，因为

这些 div 不在 @include outer-container
我缺少 Bourbon Neat 的语法
内容流水线的问题正在扰乱网格

此外，如果您知道...是否需要使用 @include outer-container？

Answer 1

来自Neat documentation

Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.

如果您的 $grid-columns 变量是 12，在您的 .full-width 表达式中，跨度对我来说是 6 列超过 12（父大小的一半）。

正确的表达方式是：

 .full-width {
    @include span-columns(6 of 6);
    border: 1px solid #111;
 }

Bourbon Neat——网格行为

Bourbon Neat -- grid behavior

neat

jekyll

bourbon