1

我刚刚开始使用 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);
    }    
}
4

1 回答 1

1

因此，您的问题是对一些最佳实践建议的请求，而不是对您要解决的特定问题的描述？

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

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

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

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

有两个陷阱：

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

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

第四，如果您正在制作缩略图网格（与页面布局相反），您可以编写一个 mixin，利用循环通过单个 mixin 调用为所有断点中的所有列生成跨度。

您可以在Breakpoint Slicer 的测试页面底部找到这种生成的响应式缩略图网格的演示。这是用于生成该网格的 Sass 代码。

也就是说，您无法做太多其他事情来减少响应式布局所需的脚手架。CSS 是一种非常原始且没有技巧的语言，它假设大量重复的语句。使用 Sass，您可以在两种情况下减少代码重复量：

  1. 如果重复的代码是绝对相同的。然后，您可以在媒体查询之外使用扩展或在媒体查询中使用混合（后者不会对 CSS 代码进行重复数据删除，但至少DRY是您的 Sass 代码）。
  2. 如果重复的代码有轻微的变化，但这些变化是有规律的（即遵循可以编程的规则）。然后，您可以编写一个循环 mixin，生成具有这些常规更改的重复脚手架。

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

PS我已经描述了我对此事的理解。不要以为这是绝对真理。寻找其他意见（可能不同于或扩展我的意见）并尝试深入研究此事以获得您自己的意见。

PPS 与您的问题没有直接关系，但请尝试使用缩进.sass语法。它为你节省了很多使用冒号和大括号的例行程序，并且在习惯了 Sass 之后你会觉得编码.scss是一种痛苦。

在此处输入图像描述

您仍然可以.scss偶尔使用。例如，使用缩进语法做地图是一件很麻烦的事，所以我将我的地图保留在部分中.scss，并用.sass.

于 2014-06-16T14:43:24.360 回答