问题标签 [susy-compass]

在让 Susy 在 Codekit 中运行之后，我终于能够更彻底地尝试了。我对整个网格和 Susy 的事情一开始就是正确的。因此，我尝试将 Susy 网格应用于我为锻炼目的而尝试构建的最近网站的设计。但是，关于 Susys 行为以及在一些边缘案例中的最佳实践出现了很多问题，这些案例在 Susy 主页上的场景中没有涵盖。我的标记看起来像这样：

这导致（对不起，由于我的状态，我还不允许发布图片 - 但在这种情况下，它们是必不可少的，所以我放置了一个直接链接）：

https://dl.dropbox.com/u/8578/sample.png

所以一个 div 正在包装页面的内容。标题带有徽标（未在下面的屏幕截图中显示）和导航。然后是那个浮动的灰色盒子的旁白元素。在几个部分（如登记卡）下方放置。我在屏幕截图中只包含了一部分。每张登记卡都应覆盖整个屏幕的宽度。在每张登记卡之间，背景图像可以透过。背景图片使用@include background-size(cover) 放置。作为旁注在每张登记卡中应该有一个左右各约eg10%的出血，所以内容只包含在中心的80%中。每个部分的内容区域包含 li 矩阵（如上面的 html 代码中）或 1 到 3 个放置内容 div 的列。到目前为止我使用的 css 的几个部分：

在末尾的包装器中，旁边和部分都驻留。基本问题如下：

a) 首先是关于最佳实践的一般性问题。在所描述的示例中，将一个容器放置在包装器 div 中是否就足够了，还是创建多个容器更好，并且如果放置在整个文档中，这些容器是否会相互对齐？是指一个容器用于全部或一个容器用于标题，一个用于旁边元素，一个用于每个部分？

b) 为 side 元素创建一个容器是否考虑周到。意思是左边一栏内容区域一出血，右边一出血？或者在那种情况下使用容器会不会很不利？

c）查看这些部分基本上可以让一个部分填满屏幕的整个宽度，在每一侧都有一个 x 列的流血（用 pad() 放置？）并在中间居中“内容”区域分成 x 列（带有跨度列）。

d) 如屏幕截图所示；在每个部分的顶部有两个相互指向的箭头。每个箭头由一个包含文本的内容框以及一个包含三角形和矩形的前后伪类组成。后者应拉伸到每一侧的屏幕一侧。通过将每个元素放在一列中是否有意义并且可以获得仅响应式 css 的解决方案：

col1 col2 col3 col4 col5 矩形内容三角形内容矩形左右

通过分配 100% 的宽度，每个元素都应该填满它所在的列的整个宽度，同时也具有响应性。如果这个想法可行，是否有必要为每个部分创建两个容器（一个用于箭头，一个用于下方有出血的内容）或者一个就足够了？

e) 最后一个问题是关于申请的。如果我使用：

它看起来像一开始的屏幕截图。如果我使用 Susy mixins，我会得到以下信息：

结果如下所示：

https://dl.dropbox.com/u/8578/result2.png

好吧，这就是现在。我仍然有点困惑和不确定最佳实践，以及到目前为止我是否做得很好。;) 任何提示和建议将不胜感激。提前感谢拉尔夫

我对这个我似乎无法弄清楚的错误感到有点沮丧。我曾经有一个使用 css 文件的 html.erb 文件，但现在我切换到 scss 并添加了 sass-rails、compass-rails 和 susy。当我尝试加载同一页面时，它会生成此错误。

错误：

显示 [..]/app/views/layouts/shared.html.erb 其中第 # 行提出：

堆栈级别太深

（在 [..]/app/assets/stylesheets/sharepage_new/screen.css.scss）

从终端：

ActionView::Template::Error（堆栈级别太深（在 [..]/app/assets/stylesheets/sharepage_new/screen.css.scss））：sprockets (2.1.3) lib/sprockets/context.rb:180

渲染 /Users/me/.rvm/gems/ruby-1.9.3-p194/gems/actionpack-3.2.0/lib/action_dispatch/middleware/templates/rescues/_trace.erb (1.0ms) 渲染 /Users/me/ .rvm/gems/ruby-1.9.3-p194/gems/actionpack-3.2.0/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb (0.7ms) 渲染/Users/me/.rvm/gems/ruby -1.9.3-p194/gems/actionpack-3.2.0/lib/action_dispatch/middleware/templates/rescues/template_error.erb 在救援/布局中（3.5ms）

来自 Gemfile：

你好！

这可能是由于我对 SASS/Compass 缺乏了解造成的。

我正在尝试使用以下 SASS 代码输出网格宽度：

块 3 中没有打印任何内容。:(

我也试过了content: columns-width($total-columns)，还是不行。如果我这样做content: "foo"了，“foo”会被打印出来。

我究竟做错了什么？我如何查看 susy 计算的网格宽度？另外，它可以打印在compass watch输出中吗？

我已经成功地使用了漂亮的Susy 网格系统来创建一个类似于 WebDesignerWall.com 的响应式布局：

我未能实现的是position:fixed侧边栏。

当页面滚动并停留在同一位置时，这样的侧边栏不会滚动。这非常方便（无论如何，您实际上不能将更多内容放入侧边栏中，因为它会使页面顶部在一个狭窄的窗口中变得混乱）。

每当我应用于position:fixed列时，我的布局都会变得疯狂： 彩色块被声明为三列宽，但在position:fixed应用于侧边栏时会进一步拉伸..

我认为问题在于侧边栏的宽度是相对的，即以百分比设置。由于position:fixed，宽度是根据浏览器窗口的宽度测量的，而不是它的容器（尽管我将容器设置为position:relative）。

问题是：如何将列固定在窗口上，同时根据容器而不是视口测量其宽度？

也许可以用 JS 固定元素的位置？

PS我已经尝试过width: inherit解决方案，但这对我的情况没有任何帮助。

我想我设法解决了与 Susy 的大部分开始问题。我无法弄清楚的唯一奇怪的事情是为什么它在创建图像矩阵时的行为方式。

这是我的设置：

这是HTML代码：

这应该是一个 3x3 的图像矩阵，页面上的其他地方应该有一个 7x4 的图像矩阵，但两者都表现得很奇怪。两者都不尊重两边都有 3 个边距栏以及它们的位置。

假设的 7x4 矩阵看起来像这样，假设的 3x3 矩阵看起来像这样。

这是CSS代码：

暂时就是这样。有人知道为什么苏西会这样吗？尤其是在 3x3 矩阵上，所有内容基本上都应该适合：6 + 3*6等于我设置的列数。不知何故令人困惑。

我需要用 gem安装susy 。当我输入

这将导致一条错误消息：

但是我已经检查了 github 的源代码并且 0.9 标签确实存在。

这怎么可能发生？如何强制 ruby​​gem 下载那些特定版本而不是最新版本？

我开始使用 Compass 和 Susy。我的目标是让我的布局适应手机、平板电脑和桌面屏幕尺寸。在 Susy 示例（susy.oddbird.net或SO question）中，存在一种让列数适应屏幕大小的模式。具体来说，有如下嵌套规则：

我现在的问题是：容器 { @include container } 做什么？而且，为什么它又嵌套在桌面包含？

我想知道你用什么（如果有的话）垫片来让魔法网格在 IE8 及以下的SUSY中正确响应？

在非 susy 网站上，我一直使用moderizr或 google 的 shim，它们按预期工作。我在我的第一个 SUSY 网站上工作，最大尺寸的媒体查询不会启动。

http://dev.apehangar.com

我有很多元素，其中 div 的 CONTENT 应该与我的 960 网格对齐，但我希望容纳它们的 CONTAINER 延伸到网格两侧的排水沟中。

例如，请看下图。我想用灰色线作为我的网格来指定 div 的大小，但是将 5-10px 的白色延伸到外面。那可能吗？

我有一个完美运行的网格，除了我希望导航中的列相互对接。这是桌面上的 24 列魔法网格，每个导航项都是 4/24。如果我尝试负边距，它们不再跨越导航栏的整个宽度，它们滑到左边并留下一个洞（最后一项是欧米茄）。这可以通过列来完成，还是我只需要在没有导航栏的情况下完成？在此屏幕截图中，我将它们全部涂成灰色以使其明显：