问题标签 [susy-compass]

我已经用 Susy 配置了我的第一个指南针项目。

在我的screen.scss，我有以下代码：

输出screen.css结果为：

问题1：在文章块中省略omega属性时screen.scss，我没有这个' #margin-left: -1em;'。这是什么意思？

问题2：所有元素都设置了一个width属性。由于所有块都内联显示，因此此处是否允许这样做？

我已经安装了 susy 并检查了它是否存在，我可以从命令行使用 susy 创建一个新项目，但是当我尝试使用 Scout 执行此操作时遇到了问题。我添加了一个仅包含 require 'susy' 的配置文件，并将其放在项目的 Scout 目录中，并更新 gui 配置以引用它。当我为尝试 @import susy 的项目启动 Scout 时，我得到

“org/jruby/RubyKernel.java 的第 1038 行的 LoadError：没有要加载的文件——susy”

想知道是否有人在 Scout 上运行过 susy，如果有，他们是如何设置的？

看susy站点.secondary，遇到断点怎么隐藏？

我正在尝试在两个不同的指南针项目上找到一个很好的解决方案。一个基于 Compass 使用 Blueprint（旧版本），另一个基于 susy grid（新版本）。

目前，我必须为该watch过程重新安装正确的版本。

是否可以compile使用指定的版本运行？如果还可以运行watch具有指定版本的进程，那就太好了。

我正在使用Susy。

我未能利用内容优先的方法，并决定先使用 window-px-widths-first

起初我尝试了内容优先的网格方法，但很快我发现我的网站在不同的设备上表现出意外。它会显示一个移动布局，我想要一个平板电脑布局等。我最终调整了 Susy 设置的 em 值，以匹配某些屏幕宽度（px 值）。代码变得丑陋，我意识到我实际上不再使用内容优先的方法。

这是我使用这种错误方法创建的网站主页的静态快照及其代码的快照。

所以我决定完全放弃内容优先的方法，首先使用 px 值。

在编写代码之前，我为我的网格制定了要求

首先，我按屏幕尺寸对不同设备进行了分组。然后我想出了最适合这些设备组的断点的 px 值：

我想以下假设/要求：

1. Window-px-widths-first 方法（如上所述）。

2. $container-style 是流动的。当屏幕宽度介于两个断点之间时，容器的宽度会自动调整以匹配较大的断点。布局中的列数不变，对应下断点。

3. 最后一个断点是容器的最大宽度。该网站不会进一步延伸，而是会有额外的排水沟。

4. 移动优先。从“S”布局开始，随着屏幕变宽，用其他布局覆盖它。

经过深思熟虑，我的方法演变为以下代码

（此代码是一个综合示例。我从我的实际代码中摘录并进行了一些修改，因此它可能会遗漏一些东西或有不一致的地方。）

这是我使用这种方法创建的网站主页的静态快照及其代码的快照。

问题

1. 遵循 window-px-widths-first 方法是我深思熟虑的决定，并且是针对以下问题的。我很欣赏您关于内容优先的论点，但请不要局限于说我错了，请回答以下特定于 window-px-widths-first 的问题。

2. 我的方法是先使用 Susy 执行 window-px-widths-first 的一种优雅方式，还是一段丑陋的代码？

3. 我怎样才能让我的代码更优雅？

   我不喜欢那些必须为每个容器和每个列重复的大量断点声明。我只能考虑使用记录不充分的可能性来为+container. 但只要+set-container-width不是我在每个媒体查询中执行的唯一代码，即使这个想法也不是一种选择。:(

4. 与 Susy 一起使用 window-px-widths-first 的推荐方法是什么（并满足我上面描述的要求）？

5. 请揭示您发现的我的代码的任何缺点。我是 SASS 的新手，我相信您可以提出更有效的方法来做同样的事情。

我正在使用 Susy 构建一个移动优先网站，并希望为不同的屏幕尺寸提供不同的布局。每个布局都有自己的一组列、列宽和装订线宽度。

我该怎么做呢？

1.老苏西法

在旧的 Susy 中，你会这样做：

[背景颜色是这样我可以看出它正在工作]

在 New Susy 中，当我这样做时，无论屏幕大小如何，列数始终为 6。它们也不是正确的列大小。

2. 断点法 New Susy 有一个新的断点法，可以让你为不同的布局指定不同的列。这就是我使用它的方式：

当我使用此代码时，无论布局如何，列现在总是停留在 4。您也不能使用此方法来指定不同的列宽/填充值。

苏西太棒了，我知道我误会了什么。但是我花了很长时间查看文档并尝试不同的东西，却看不出我做错了什么。

我知道我以前问过这个问题，但那是针对旧的 Susy 版本的。

虽然我更喜欢susy在我的 css 上使用 mixins，但在某些情况下，拥有通用网格类很有用，例如在将这些声明内联的情况下用于 web 表单。

有什么办法吗？

目前我正在手动生成这些类，如下所示：

我正在尝试用流体柱和固定排水沟构建一个 12 列网格。随着窗口大小的调整，列会改变宽度，但排水沟将保持不变。基本上，列的百分比，排水沟的 ems。

苏西有可能吗？

所以这就是问题所在。我对 Susy 有点陌生，所以我不完全确定完成此任务的最佳方法，但我希望根据 body 类和已在下面设置的媒体查询将布局应用于 .hfeed div .

这就是为什么。我正在为 WordPress 执行此操作，并且使用应用于正文的 CSS 类来设置不同的布局。具体来说，这两个类是 .full-width-content 和 .content-sidebar。我需要选择器跨越整个容器或分别位于当前定义的区域。因此，我想要设置样式的特定选择器将是“.full-width-content .hfeed”和“.content-sidebar .hfeed”。我尝试将它们设置为包含不同的容器，但这不起作用。

我是否应该简单地将这一部分从定义的网格中分离出来并按类选择然后进行媒体查询？

在 susy 中实现这一目标的最佳方法是什么？

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

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

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

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

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

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

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

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

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

谢谢