奇异响应沟槽宽度

Question

我使用Singluritygs和断点(包含响应)，并且我希望根据这些断点来更改我的全局沟槽宽度。

我以为这能行，但它不管用：

$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);
}

Answer 1

问题与解决

1. 奇点与响应不兼容。或者，更准确地说，响应- to不提供奇点所需的功能。
2. 定义响应型排水沟的正确方法是这里，如下所示： @include add-gutter(.25 at 900px);。
3. 响应网格和排水沟应该定义在你的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 我认为“安全”与“响应”兼容，我正在使用它成功地添加新的网格--请参阅我在问题中添加的注释。文档说对于响应性网格使用断点，断点包括Repond-to在其中(github.com/Team-Sass/breakpoint/wiki/Respond-To).

你做错了。

奇点维护各种断点的网格定义列表(以及另一个用于沟槽定义的列表)。当跨越时，奇点向断点询问上下文(当前断点)，并从列表中检索相应的网格和沟槽定义。

当与响应- to一起使用时，奇点无法检索上下文，并认为它跨越移动第一上下文中的项。

相反，填充包含每个断点定义的网格/沟槽定义列表时，列表中只有一个条目--移动第一个条目。

通过在媒体查询中重新应用add-gutter()，您认为您正在为该媒体查询设置沟槽定义。但是相反，您是在覆盖移动第一网格定义。由于响应-不向奇点报告上下文，它在媒体查询中使用了移动第一定义。

这本身就是一个有效的方法。事实上，我已经在奇点1.0中积极地使用它。但是它有一个明显的缺点:由于网格/沟槽定义在全局上被覆盖，您最终需要在每次使用跨域混合之前重新应用add-grid()和add-gutter()，否则就会发生奇异使用定义的变化，这是您所不期望的。如果您在大量的小文件中组织Sass代码，情况尤其如此。

我建议你调查我写的两个扩展：

• 断点切割机 --断点的一种非常快速高效的语法。它比响应更好，并且完全支持奇点。
• 奇异快扳手 --一个具有多个快捷混合器的奇点工具。其中之一是为了简化每次重新应用网格/沟槽定义的方法。

更新2

davidpauljunior 我仍然不明白为什么网格可以在响应范围内被重新定义--对于媒体查询，为什么排水沟不能。而且，你说我只有一个条目“移动第一”，但那个条目是移动优先(768 be )之后的屏幕大小。

您必须理解，无论您是否在媒体查询中执行移动第一沟槽定义，@include add-gutter(1/2);都会覆盖它。

上面我已经解释了(并提供了一个指向文档的链接)如何定义媒体查询感知的网格和排水沟。重复：

lolmaus 定义响应型排水沟的正确方法是这里，如下所示： @include add-gutter(.25 at 900px);。

这就是你最初尝试的方式：http://sassmeister.com/gist/c530dfe7c249fad254e9 --请学习这个例子及其输出，我希望你现在能理解。

davidpauljunior 这个想法是，对于没有媒体查询(移动第一)，它将采取全球排水沟，我的第一个媒体查询(768及以上)，我将重置全球排水沟等。我已经用变量来设置它们了。也许我只是错过了一些关于回应的东西。

同样，我已经说过，这是一个有效的办法。我的上一个SassMeister链接证明它已经对您的初始尝试起作用了。

响应- to适合于这种情况:它不向奇点报告媒体查询上下文，但是您没有将媒体查询上下文考虑在内，而是一直只使用移动优先定义。

只是不要忘记每次跨越新元素时重新应用网格和排水沟，只是为了确保在所需的上下文中这样做。

使用我的重置网格()助手，您可以简化重新设置网格/沟槽定义的工作。