2

我最近在几个项目中使用了 Compass Susy 并且有一些关于它的问题，现在我已经尝试了几次。

顺便说一下，我从桌面优先的工作流程开始。

在这些项目中，我设置了默认的列宽、间距等。

假设我有一个 90px 的 12 列网格和 10px 排水沟

然后，当我到达移动媒体查询时，假设我想要一个 4 列网格，然后我有一个媒体布局，例如： $mobile: 4 480px

@include at-breakpoint($mobile) { // 这里的样式 }

我真正感到困惑的是我不了解媒体布局。如果我在媒体布局中指定我想要最小宽度为 480 像素的 4 列，那么它如何知道列的宽度或我想要的装订线宽度。我猜它使用默认值。那是它使用的吗？

为了解决这个问题，对于每个媒体查询，我最终不得不设置媒体查询，跨越列，然后使用 with-grid-settings mixin 指定一个新网格，然后重新包含容器。

我可能只是搞错了。有人可以解释它是如何工作的以及我应该如何正确使用 Susy 吗？

谢谢

4

1 回答 1

4

你是对的。at-breakpoint并不是要为您提供每种尺寸的全新网格设置 - 只是为了更改列数。with-grid-settings是用于更改网格设置的正确工具，如果您需要更改不同大小的网格设置，它们两者可以很好地协同工作。

@include at-breakpoint($mobile) { 
  @include with-grid-settings(4,3em,2em,1em) { // styles here }
}

目前没有捷径。

于 2012-12-07T02:40:34.627 回答