问题标签 [susy-compass]

我试图了解垂直节奏并阅读一整天，尝试了几件事，但我的布局不断中断，因为我未能正确应用指南针填充拖车，如您在屏幕截图中看到的那样：

！截屏

• 黄色背景的线是我的 hr 标签。
• 橙色背景的是文章。

这是我的代码：

HTML：

CSS：

为了简单起见，我评论了我的 HR 造型。

这是另一个差距更明显的例子：

！截图2

我不知道我在这里做错了什么。请帮助我了解此属性。

链接：

• http://compass-style.org/reference/compass/typography/vertical_rhythm/#mixin-trailing-border
• http://www.youtube.com/watch?v=ls3Clk-kz3s&feature=player_detailpage#t=464s

我设计了一个布局，使用 978px 作为网格宽度，网格填充为 12px。老实说，我从来没有真正理解网格填充的目的，现在我更加困惑，因为我认为网格填充将应用于我的总宽度的内部，所以事情不会停留在边缘网格。

例如，我的标题的背景颜色为#333. 我跨越了徽标部分的 3 列，但它看起来不太好，因为它就在边缘。如果我在标题内部添加 12px 的填充，显然它会扰乱我的列流。我尝试将它添加到 span-columns mixin 中，例如@include span-columns(3, 12, 12px 0px)，但是填充太宽了，我认为这不会有效，因为我希望它在左右两边的所有东西上。

那么在网格内部获得填充的最佳方法是什么？

这是一个小结构：

我尝试向#page-wrapper和#pagediv 添加填充，但这不起作用。

/ * ** * *更新* ** * * /

这是我要实现的目标的屏幕截图：

这是我想要响应式的桌面布局，所以我希望在整个布局中保持相同的填充效果。基本上，屏幕截图中的网格总宽度为 1002，侧边为 12px，列为 12-54px，排水沟为 11-30px。

这是一个烟花模板，所以我的 320 页面是 8 列、27 像素宽、12 像素间距和 10 像素间距宽度。我开始认为我设计错了，正如我之前提到的，我并不真正理解网格填充的意义。

如您所见，我希望在容器的侧面有填充物，默认情况下所有东西都位于边缘。

这是我设置的代码片段：

现在这是我通过检查其他帖子所做的事情，它似乎有效，但我不确定这是否是正确的方法：

我试图弄清楚如何根据断点使用不同的网格设置，但无法让它工作。这是我的代码。我正在使用 response-to mixin 进行媒体查询。

我有一个 6 列的固定宽度网格，但我希望一个特定的“行”有 5 列，这可能吗？

谢谢

我正在尝试使用 Susy Compass 框架将 2 个 div 向右浮动并遇到一个清除问题：

这是我的 Susy 布局代码：

为了举例说明这是如何渲染的，下面是一个屏幕截图：

如您所见，div-3并div-5没有清除到顶部，与div-1.

我想也许我可以使用@alphamixin，但它在 Susy 1.0（我正在使用）中已被弃用。我也尝试过使用@omegaondiv-3并且div-5没有任何变化。

有没有人有过在断点混合中使用“字体大小”参数的经验？

在文档中，它说明了以下内容...

在我正在使用的设计中，我采用移动优先方法，因此 $base-font-size = 12px。

然后我在 50em 处添加一个断点（此示例为任意值），如下所示...

我不确定我是否正确理解了这一点，但我期待，因为我已经为“font-size”指定了一个值，一旦屏幕超过 50em，我的字体大小将增加到 16px。

但是，我认为我可能对这个“字体大小”参数的用途有误解，因为字体大小在任何大小下都保持在 12 像素。

有谁知道这个参数有什么影响？

我已经使用以下内容开始了一个新的 Rails 项目gemfile：

然后我尝试@import "susy";进入我的application.css.scss文件，但失败并出现以下错误：

导入sassy-buttons有效，但susy由于某种原因无效。

嗨，我尝试使用 codekit。我已经安装了最新的 codekit 版本（1.26）除了我还通过终端安装了最新版本的 sass 和 compass。在 Codekit 中，我切换到使用安装在终端中的外部版本的指南针。根据 Codekit 开发人员的说法，目前这是必要的，因为对于指南针扩展，内部代码包指南针版本是外部的，这会导致一些依赖性问题。然后我从 github 下载了最新的 susy 压缩版本。在我的项目的 config.rb 文件中，我为 susy 的普通解压缩版本设置了要求：

在我的 scss 文件中：

在我设置的整个页面的包装器 div 中：

Bleed 是 Eric 在这里发布的 mixin。直到那里一切看起来都很好。我得到了 susy 网格背景和 bleed mixin，元素被拉伸到整个页面宽度。但是，当我尝试添加“跨列”代码包时，编译时会出现错误：

_layout.scss 中与 susy 相关的代码如下所示：

我是否也必须在终端中安装 susy，而不是仅链接到未压缩的 zip 文件或如何才能使事情顺利进行。仍然不确定是什么导致编译错误？我用过的代码？代码包？苏西？如果有人提示如何使事情正常进行，那就太好了。提前致谢。河。

我拼命想用 Susy 模拟一个网站。我担心我可能只是遗漏了一些明显的东西，但是当我在我的 Susy 网格中嵌套项目时，每列的百分比宽度和边距似乎略微超调，以至于它们加起来超过 100% 并换行到下一行。在以下示例中，#main_headernav 设置为 12 列中的 8 列，其中的每个 li 应填充 8 列中的 2 列。每个 li 都有一个计算样式如下，加起来超过 100% 并导致最后一个项目换行

这是有问题的例子：

和SASS：

操作系统：Ubuntu 12.04
Ruby 版本：ruby 1.9.3p0（2011-10-30 修订版 33570）[i686-linux]

当我尝试通过 安装 Susy 时gem install susy，终端会给我以下响应：

ERROR: While executing gem ... (NoMethodError)
undefined method 'size' for nil:NilClass

到目前为止，Google/Stackoverflow 搜索对我没有帮助