问题标签 [susy-compass]

我正在运行 Rails 4 应用程序并试图让 compass 和 susy 运行。我收到以下错误：

我的 gemfile 组：

我唯一的 CSS 行 (_base.sass)

我已经运行了 Bundle Install，我的应用正在使用：

完全迷失了。我没有指南针的 config.rb 文件，但据我所知，在 Rails 3.1/3.2 之后不需要它。有任何想法吗？

我对 Susy 和响应式设计比较陌生。我已经设法设置我的网格并使用 at-breakpoint()，我首先通过在调整浏览器窗口大小时对其进行测试，然后在实际的移动设备（手机和平板电脑）上对其进行测试，从而使页面完全响应. 我遇到了 iPad 的问题，因为在媒体查询中需要额外的方向规则（方向：横向）。这里的解决方法是什么，有没有办法将它包含在断点规则中，或者我必须为这种情况制作一个单独的媒体查询？

这是我的网格设置：

在处理侧边栏和页面正文时，首先我将它们显示为块元素以水平填充整个页面，然后在断点之后将它们表示为如下所示的列：

我应该如何更改代码以保留断点的变量并添加方向规则？谢谢！

我无法让susy-grid-background mixin 显示我的网格。我已将网格相关变量设置为 true 并提供了网格颜色，但无论我做什么网格都不会显示。

如果我从 Susy 网站运行演示代码，网格会按预期显示。我错过了什么？

我创建了一个 susy 网格，并试图将其用于复杂的嵌套导航。我遇到的问题是我想在标题范围内有一个 0em $gutter-width （我正在使用导航的标签），但在整个页面的其余部分，我想要一个 1em 的排水沟. 我的导航栏是 100% 的屏幕宽度，理想情况下能够顺利处理小数列。

这是我正在使用的：

标题

mixin (horizo​​ntal_ul_structure)：现在嵌套效果很好，悬停 ul 应该是 100% 宽度。因此，我在 1 列的上下文中将其设为 12 列。

在这里，如果您注意到我正在使用的锚标记 hack 基本上将锚标记扩展到 li 元素之外，以防止我不工作的排水沟。

有什么办法可以摆脱这个排水沟宽度，然后为我的应用程序的不同部分设置另一个网格？

无论如何命名susy配置？

我正在使用 Susy 网格并利用这篇文章中描述的方法A `position:fixed` 侧边栏，其宽度以百分比设置？设置固定侧边栏。它在 Chrome 上运行良好，但在 IE10 中测试它的固定侧边栏端位于文档中间。谁能看到这里有什么问题？

您可以在以下网址看到它的实际效果： http ://dev-johandahl.com/gridtest/

Mixin“with-grid-settings”不接受内容块。

试图解决这个问题，搜索它，但找不到任何信息。

谢谢，伊利亚

使用 Susy 时，您在行的最后一项上放置一个“omega”标志以删除其margin-right. 例如，假设我们有一堆项目需要在 12 列的网格上布局：

和 SCSS：

但我们的网格是响应式的，较小的显示器使用 8 列网格。问题是omega现在需要出现在2n，而不是3n：

所以我的问题是：对于 Susy，您是否需要为每个断点重新定义列，或者是否有某种方法可以一劳永逸地定义列宽并让其omega自然落在正确的位置？

如果没有，是否有任何其他网格系统提供该功能？

我正在使用 Susy 框架为我的网站创建一个网格，我非常喜欢它。我无法弄清楚为什么在跨度列中使用 omega 时会添加 #margin-left: -1em。我似乎找不到任何关于它的信息，当我验证 css 时它会抛出这个错误： .second Parse Error #margin-left: -1em;

我的代码如下所示

并生成这个

这当然是最容易用一些代码来展示的：

我从 4 列开始，第 4 列是 omega，然后我想改成 3 列，第 3 列是 omega。正确的元素正确地向左/向右浮动，但每 4 次得到一个错误的边距 - 右...

我这样做对吗？或者更确切地说，我做错了什么？

感谢阅读，/安迪

我今天在一个新网站上使用 em's/rem's 玩了一会，有几件事我想在这里讨论/询问。

多年来，我完全是一个基于像素的人，在需要时会投入一些百分比。

我一直在阅读 em 和 rem 是网络应有的“方式”。足够公平，这就是我今天试一试的原因。

所以，第一件事。使用 em's/rem's 的尺寸是否只是为了改变事物相对于主要字体大小的尺寸？

如果是这样，那么您会在什么情况下更改主要字体大小？我一直将我的设置为 16px 并使用它。

我找到了一个 Sass mixin，它允许我以像素为单位指定任何属性的尺寸，并使用 rem 和基于像素的后备输出它。不过，我先根据自己的喜好对其进行了调整。

因此，我开始使用 rem mixin 为我的所有维度（边距、填充和一些高度）构建站点。是的，当我更改主要字体大小时，所有内容都会缩放，但同样的问题与此处的第 2 个问题相同。

我使用 Compass Susy 来设置我的网格并使用 em 来指定它的设置，（我通常会选择像素）。我将 Susy 中的网格样式设置为魔术网格，当浏览器比网格宽但内部完全灵活时，它使网格保持静态。

当然，我所读到的关于使用 em 的好处的所有内容都可以使用媒体查询来完成吗？你们做什么，最重要的是主流网站使用什么？

对，接下来的两个问题是关于图像的。我今天遇到了两种情况，在等式中的某处使用带有图像的 em/rem 会导致问题。

5a。我将 h2 设置为内联块并在周围添加了填充，然后在右侧添加了相当于 45px 填充的 rem。我将 line-height 设置为 1.3 的无单位值。然后，我将图像设置为 h2 的背景，使其出现在右侧以出现在 padding-right 中。在 16px 的标准基本字体大小下，一切都很好。但是，我增加或减少了字体大小，并裁剪了图像的顶部和底部。所以又问了2个问题。我明白为什么图像会被裁剪，但这是如何处理 em/rem 和困扰我的图像之间的关系。

5b。我有一个高度设置为 200px 高度的 rem 高度的 div。然后我在其中添加了一个高度为 200 像素的图像。使用 susy mixin span-columns 将图像的宽度设置为特定的列宽，并将高度设置为自动。当字体大小改变时，我要么最终得到一个太高或太短的图像。在这种情况下，最好的办法是什么？

我正在查看一些可用的指南针 mixin，例如这个：

我不能在里面添加我所有的 em/rem 东西吗？

我认为最重要的问题是：

为什么首先需要 em/rem？在图像方面，您如何与他们合作？有什么想法吗？