css - 奇点多个排水沟被忽略

Question

我正在使用 Singularity.gs 1.5.1 生成网格。当我声明额外的装订线尺寸时，它们将被忽略。这是我的:

@include add-grid(12);
@include add-gutter(20px);
@include add-gutter(30px at 640px);
@include add-gutter(40px at 1024px);
@include add-gutter-style('split' 'fixed');
@include sgs-change('output', 'float');

.column-1 {
  @include grid-span(1, 1);
}

这会在所有屏幕尺寸下生成 20 像素的网格。根据文档，这应该产生:

在 0 - 640 像素处有 20 像素的间距
640 像素 - 1024 像素处的 30 像素间距
1024 像素及以上的 40 像素间距

为什么这不起作用？

Answer 1

阅读 Responsive Grid Quickstart Section奇点。

Singularity 不提供您可能习惯的响应式网格，而是提供响应式网格上下文。这允许您在调用 grid-span 时定义您想要的网格选项。为了将内容附加到您的网格，您仍然需要在媒体查询中调用 grid-span 以应用它。

当您使用带有 float 输出样式的固定间距时，您的另一个建议是创建具有您的填充更改的混合并包含它。

@mixin column-padding {
  padding-left: 10px;
  padding-right: 10px;

  @include breakpoint(640px) {
    padding-left: 15px;
    padding-right: 15px;
  }

  @include breakpoint(1024px) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.column-1 {
  @include grid-span(1, 1);
  @include column-padding;
}