Question

我使用Singluritygs和Breakpoints（包含响应），我希望我的全局装订线宽度根据这些断点进行更改。

我认为这会奏效，但它没有：

$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

问题和解决方案

奇点与Respond-To不兼容。或者，更准确地说，Respond-To不提供Singularity所需的功能。
here描述了定义响应排水沟的正确方法，如下所示：

@include add-gutter(.25 at 900px);。
响应式网格和排水沟应在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与回复兼容，我用它来成功添加新网格 - 请参阅我在问题中添加的注释。文档说，对于reponsive网格使用Breakpoint，Breakpoint包含Repond-to（github.com/Team-Sass/breakpoint/wiki/Respond-To）。

你做错了。

Singularity维护各种断点的网格定义列表（以及另一个用于装订线定义的列表）。在跨越时，Singularity向断点请求上下文（当前断点）并从列表中检索相应的网格和装订线定义。

当与Respond-To一起使用时，Singularity无法检索上下文并认为它跨越移动优先上下文中的项目。

相反，使用每个断点的定义填充网格/装订线定义列表，列表中只有一个条目 - 移动第一个条目。

通过在媒体查询中重新应用add-gutter()，您认为您正在为该媒体查询设置装订线定义。但相反，你在全球范围内覆盖了移动优先网格定义。由于Respond-To没有向Singularity报告上下文，它在媒体查询中使用了移动优先定义。

这本身就是一种有效的方法。事实上，我正在积极地使用Singularity 1.0。但它有一个明显的缺点：由于网格/装订线定义被全局覆盖，你最终需要在每次使用spanning mixin之前重新应用add-grid()和add-gutter()，否则就会出现问题。改变Singularity将使用你不期望的定义。如果您在大量小文件中组织Sass代码，情况尤其如此。

我建议您调查我写的两个扩展程序：

Breakpoint Slicer - 一种非常快速有效的断点语法。它比Respond-To更好，并且完全支持Singularity。
Singularity Quick Spanner - 一个为Singularity提供了许多快捷键混合的工具。其中之一旨在简化每次重新应用网格/装订线定义的方法。

更新2

<强> davidpauljunior

我仍然不明白为什么如果可以在回复媒体查询中全局重新定义网格，为什么排水沟不能。另外，你说我只有1个条目＆＃39;移动第一个＆＃39;，但该条目是移动优先（768px）后的屏幕尺寸。

您必须了解@include add-gutter(1/2);会覆盖移动优先排水沟定义，无论您是否在媒体查询中执行它。

上面我已经解释过（并提供了文档链接）应该如何定义媒体查询感知网格和排水沟。重复：

<强> lolmaus

here描述了定义响应排水沟的正确方法，如下所示：
   `@include add-gutter(.25 at 900px);`.

这是您初步尝试的实际工作方式：http://sassmeister.com/gist/c530dfe7c249fad254e9请研究此示例及其输出，我希望您现在能理解。

<强> davidpauljunior

这个想法是，对于没有媒体查询（移动优先）它将采取全球阴沟，对于我的第一个媒体查询（768及以上）我将重置全局装订线等等。我现在使用变量将它们全部设置好。也许我只是错过了一些关于回应的内容。

同样，我已经说过这是一种有效的方法。我的最后一个SassMeister链接证明它已经在你最初的尝试中工作了。

并且 适用于这种情况：它没有向Singularity报告媒体查询上下文，但您没有将Singularity考虑到媒体查询上下文，你一直只使用移动优先定义。

每次跨越新元素时，不要忘记重新应用网格和装订线，只是为了确保您在所需的环境中进行此操作。

您可以使用我的reset-grid()帮助程序轻松完成重置网格/装订线定义的工作。

奇点响应沟槽宽度

1 个答案:

问题和解决方案

实施例

演示：

更新1

更新2