页脚中的四个部分

Question

我刚开始使用Singularity网格系统 - 慢慢绕过它。

我正在隔离模式下工作，可以使用移动优先方法设置我的网格值。

最小网格为@include add-grid(2);

我在页面上有一个页脚，页脚内部有四个部分。

在最小屏幕尺寸下 - 页脚设置为@include grid-span(2, 1);

我希望页脚内部的两个部分在第一列和第二列中彼此相邻。然后是下一行的下两个部分，接下来的两列。

对于屏幕尺寸 - 我希望页脚中的所有四个部分位于同一行。

在纯CSS中，通常使用浮点数来表示，并说宽度为25％。

我的问题 - 是否有任何Sass，或Singularity可以做这些四个部分的标记有点'干'？或者我是否必须为所有四个部分和所有断点设置网格位置和网格范围设置？

例如

footer.section1 {
    @include grid-span(1,1); // 2 columns

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,1);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,1);
    }    
}

footer.section2 {
    @include grid-span(2,1); // 2 columns

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,3);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,5);
    }    
}

footer.section3 {
    @include grid-span(1,1); // 2 columns - how can I force this onto the next row?

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,5);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,9);
    }    
}

footer.section4 {
    @include grid-span(1,2); // 2 columns - how can I force this onto the next row?

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,7);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,13);
    }    
}

Answer 1

所以你的问题是对一些最佳实践建议的要求，而不是你想要解决的特定问题的描述？

首先，在最小的屏幕尺寸上，当您希望块为全宽时，您不需要对其应用列跨度。默认情况下，每个块都是100％宽。

其次，你必须了解那里发生了什么。建议使用Singularity的移动优先方法建议仅使用min-width媒体查询来应用网格跨度。这意味着应用于某个断点的样式将持续存在于所有较大的断点，除非您覆盖它们。

如果这些断点处所需的布局与相应的先前断点的布局相同，则允许您在某些断点处省略生成代码。

例如，如果列数不同：2,4,6,12等，但您的块应始终共享页面宽度的50％/ 50％，则只能对最小的断点应用一次。

有两个陷阱：

1. 如果修改断点数通常会修改装订线大小，并且在先前断点处应用的跨距与当前断点的装订线不一致。要解决这个问题，您可能希望在每个断点处应用跨距，或者您可以计算每个后续断点的列和装订线大小，这些组合使得相对于容器宽度的装订线大小在所有断点处保持一致。
2. 有时您可能要求前一个断点的跨距不适用于当前断点。手动取消Singularity跨度是非常繁琐的，所以我建议，当您遇到这种需求时，用min-width + max-width媒体查询隔离您的跨度，这样它们就不会污染后续的断点。

第三，您可以使用Breakpoint Slicer来简化断点管理。它不会为您保存代码行，但可以更轻松地处理媒体查询。

第四，如果你正在进行缩略图网格（而不是页面布局），你可以编写一个mixin，它利用循环为所有断点中的所有列生成一个mixin，只需一个mixin调用。

您可以在Breakpoint Slicer's test page底部找到此类生成的响应式缩略图网格的演示。 here's the Sass code曾用于生成该网格。

那说，你没有别的办法可以减少响应式布局所需的脚手架。 CSS是一种非常原始且无艺术的语言，它假定了许多重复的陈述。使用Sass，您可以在两种情况下减少代码重复的数量：

1. 如果重复的代码完全相同。然后你可以在媒体查询中使用扩展外部媒体查询或mixins（后者不会重复删除CSS代码，但至少DRY是你的Sass代码。）
2. 如果重复的代码有轻微的变化，但这些变化是规则的（即遵循可编程的规则）。然后你可以编写一个循环mixin，生成重复的脚手架和那些常规的改动。

但是当重复的脚手架应该不规则地不同时（这对于响应式页面布局来说是常见的），那么你不得不手工完成所有的脚手架。

PS我已经描述了我对此事的理解。不要以为这是绝对的事实。寻找其他意见（可能与我的意见不同或扩展我的意见），并试图深入挖掘这个问题，以获得自己的意见。

PPS与您的问题没有直接关系，但请尝试使用缩进的.sass语法。通过冒号和大括号为您节省了大量的日常工作，在习惯了Sass后，您会觉得编码.scss很痛苦。



您仍然可以偶尔使用.scss。例如，使用缩进语法制作地图是一件麻烦事，因此我将地图保存在.scss部分中，并使用.sass执行其他操作。