css - 奇异的多个装订线被忽略

我正在使用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);
}

这将在所有屏幕尺寸下产生20px的网格。根据文档，这应该产生：

0-640px处20个装订线
640px-1024px处有30px装订线
1024px及以上的像素40个装订线

为什么这不起作用？

最佳答案

阅读奇点的Responsive Grid Quickstart Section。

奇异性不像您可能习惯的那样提供响应网格，而是提供响应网格上下文。这使您可以定义调用grid-span时希望使用的网格选项。为了将内容附加到网格中，您仍然需要在媒体查询中调用grid-span。

当您使用具有浮动输出样式的固定装订线时，对您的另一种建议是创建具有填充变化的mixin并将其包括在内。

@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;
}

关于css - 奇异的多个装订线被忽略，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28308255/