2

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

1 回答 1

1

问题与解决方案

  1. Singularity 与 Respond-To 不兼容。或者，更准确地说，Respond-To 不提供 Singularity 所需的功能。

  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

大卫保罗少年

我认为 Singlurity 与响应兼容，我正在使用它成功添加新网格 - 请参阅我在问题中添加的注释。文档说对于响应式网格使用断点，并且断点在其中包含 Repond-to (github.com/Team-Sass/breakpoint/wiki/Respond-To)。

你做错了。

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

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

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

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

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

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

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

更新 2

大卫保罗少年

我仍然不明白为什么如果可以在响应媒体查询中全局重新定义网格，为什么排水沟不能。另外，您说我只有一个“移动优先”条目，但该条目是移动优先之后的屏幕尺寸（768px）。

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

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

洛莫斯

此处描述了定义响应式排水沟的正确方法，如下所示：

   `@include add-gutter(.25 at 900px);`.

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

大卫保罗少年

这个想法是，对于没有媒体查询（移动优先），它将采用全局排水沟，对于我的第一个媒体查询（768 及以上），我将重置全局排水沟，依此类推。我现在已经使用变量设置了它们。也许我只是错过了一些关于 Respond-To 的东西。

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

并且 Respond-To适合这种情况：它不会向 Singularity 报告媒体查询上下文，但是您没有让 Singularity 考虑媒体查询上下文，而是让它仅使用移动优先定义时间。

只是不要忘记在每次跨越新元素时重新应用网格和装订线，以确保您在所需的上下文中执行此操作。

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

于 2014-07-23T09:25:53.537 回答