我使用Singluritygs和Breakpoints(包括response-to(，我希望我的全局沟槽宽度根据这些断点进行更改。
我以为这会奏效，但没有：
$breakpoints: add-breakpoint('small', 768px);
@include add-grid(12);
@include add-gutter(1);
@include respond-to('small') {
@include add-gutter(1/2);
}
我是不是走错路了？
请注意，使用以下技术添加网格确实有效：
@include respond-to('small') {
@include grid-span(9, 4);
}
问题与解决方案
-
Singularity与Respond To不兼容。或者，更准确地说，"响应"不提供奇点所需的功能。
-
这里描述了定义响应式排水沟的正确方法，如下所示：
CCD_ 1。
-
响应网格和排水沟应该定义在你的Sass的顶部，以及移动的第一网格和排水槽。
示例：
$bp-small: 768px;
@include add-grid(12);
@include add-gutter(1);
@include add-gutter(1/2 at $bp-small);
.foo {
@include float-span(1);
@include breakpoint($bp-small) {
@include float-span(1);
}
}
演示：
http://sassmeister.com/gist/b49bd305f029afe9cd68
更新1
davidpauljunior
我认为Singlurity与response兼容，我正在使用它成功添加新的网格-请参阅问题中添加的注释。文档中说，对于可扩展的网格，使用Breakpoint，其中包含Repond to(github.com/Team-Sass/断点/wiki/Respond-to(。
你做错了。
Singularity维护了各种断点的网格定义列表(以及另一个沟槽定义列表(。生成时，Singularity会向Breakpoint询问上下文(当前断点(，并从列表中检索相应的网格和槽定义。
当与"响应"一起使用时，Singularity无法检索上下文，并认为它跨越了移动优先上下文中的项目。
不是用每个断点的定义填充网格/槽定义列表，而是在列表中只有一个条目——移动第一个条目。
通过在媒体查询中重新应用add-gutter()，您认为您正在为该媒体查询设置槽定义。但你却在全球覆盖移动第一网格的定义。由于Respond to没有向Singularity报告上下文，它在媒体查询中使用了移动优先的定义。
这本身就是一个有效的方法。事实上，我一直在Singularity 1.0中积极使用它。但它有一个明显的缺点：由于网格/槽定义是全局覆盖的，因此在每次使用生成混合之前，您最终需要重新应用add-grid()和add-gutter()，否则Singularity将使用您意想不到的定义。如果您将Sass代码组织在大量的小文件中，情况尤其如此。
我建议你调查我写的两个扩展：
- 断点切片器——断点的一种非常快速高效的语法。它比"响应"更好，并且完全支持奇点
- Singularity Quick Spanner——一个包含许多Singularity快捷组合的工具。其中一个是为了简化每次重新应用格线/檐沟定义的方法
更新2
davidpauljunior
我仍然不明白，如果网格可以在"回应媒体查询"中全局重新定义，为什么排水沟不能。此外，你说我只有一个条目"手机优先"，但该条目是手机优先之后的屏幕大小(768px(。
您必须明白，无论是否在媒体查询中执行，@include add-gutter(1/2);都会覆盖移动第一个槽定义。
上面我已经解释了(并提供了文档链接(应该如何定义媒体查询感知网格和排水沟。重复：
lolmaus
这里描述了定义响应式排水沟的正确方法，如下所示：
`@include add-gutter(.25 at 900px);`.
这就是您最初尝试的实际工作方式：http://sassmeister.com/gist/c530dfe7c249fad254e9请研究这个例子和它的输出，我希望你现在能理解。
davidpauljunior
当时的想法是，对于没有媒体查询(移动优先(，它将使用全局槽，对于我的第一个媒体查询(768及以上(，我将重置全局槽，以此类推。我现在已经使用变量设置了它们。也许我只是错过了"回复"的一些内容。
我再次指出，这是一个有效的方法。我的最后一个SassMeister链接证明它已经为你的初次尝试工作了。
Respond To适合这种情况：它不向Singularity报告媒体查询上下文，但你没有让Singularity将媒体查询上下文考虑在内，你让它一直只使用移动优先定义。
只是不要忘记每次跨越一个新元素时都要重新应用格线和檐沟，以确保在所需的上下文中进行操作。
使用我的reset-grid((助手，可以更容易地重置网格/排水沟定义。