问题标签 [susy-sass]

我正在尝试使用 Susy 2 构建一个简单的嵌套布局：一个包含两列（子列）的容器，每个子列包含副本和两个嵌套列（孙列）。

我注意到孙子列有自己的排水沟，因此它们的内容与父级的排水沟不一致。

理想情况下，孙子元素（及其背景颜色）将扩展到子元素的全宽。

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

要点：https ://gist.github.com/andreimoment/2a734aa4a0e99b2866e9

HTML：

SCSS：

我有一个基本的联系表格，我想以较小的屏幕尺寸堆叠它，并在较大尺寸的情况下使用两列布局。

我的前三个标签和输入应该进入第一列，而我的 textarea 和随附的标签应该进入第二列。提交也应该在文本区域下方。

但是由于某种原因，尽管我认为 CSS 应该规定，我的电子邮件字段仍出现在 textarea 上方。

这是我的 HTML：

这是我的 SCSS：

我是“Susy”的新手，正在努力找出一些项目。

我正在尝试创建一个包含 3 个流体促销框（在附加图像中均为灰色）和 1 个静态框（这是一个 300 像素 x 250 像素的大框广告 - JPG 文件）的行。我不想让黄色框（广告）比例，但我确实希望其他 3 个框是流动的，并在最后一个灰色框的右侧保持相等的边距。

目前，当我开始缩放页面时，黄色框（图像）下降到 3 个流体框下方。有没有办法让他们充当一排。

提前致谢

我正在用 Susy 试验静态布局，我需要一些关于如何建立具有相同排水沟宽度的嵌套网格的指导。在下面的示例中，我的 .main 跨越 12 列中的 9 列，我希望通过保持相同的 18px 间距宽度使其子 .main-item 在 9 列布局内具有四列布局。

http://sassmeister.com/gist/2a414c2b9dc6f332b89b

这当然可以在流体网格中无缝工作，因为一切都是百分比，但在这个实验中，我想尝试使用静态网格。

做这个的最好方式是什么？“with-layout” mixin 是否只是通过定义新布局来实现这一目标的可能解决方案，还是有其他方法可以实现这一目标？

到目前为止我所尝试的： 1. 简单地提到 .main-item 的 span(3 of 12) 知道它不起作用，但仍然试了一下 2. 定义新布局并使用 with-layout mixin，但它让我失望此错误“函数有效列数学在没有@return 的情况下完成”。我想我会做错的。

感谢您的建议。

我正在尝试生成跨列跨度为 4 的 1/5 的排水沟。全局设置是：

紧随其后的是这个选择器：

生成的 CSS 为.mosaic：

我确实希望每边的填充为 4/5 / 12（列）/2（边）= 1/30 = 3.333...% 这将导致 1/5 的排水沟（每边 1/10 ) 的列跨度的总宽度。

1. 我如何达到预期的效果？
2. 填充值 (1.85...%) 是如何计算的？
3. 为什么它们不符合我的预期？

我的所有 Sass/Scss 工作都使用带有 Web Essentials 扩展的 Visual Studio 2013。这很棒。

我遇到了一个关于我真正想使用的网格框架的教程，名为Susy。然而，我在上面看到的教程都是在 Linux 或 mac 以及某种基于 ruby​​ 的环境中使用它。

即使在站点链接上，我也没有看到让它在 VS2013 中工作的说明。我尝试了扩展管理器和 nuget 包管理器，但无济于事。

我唯一的选择似乎是下载源代码并尝试通过组合所有 Scss 文件来编译它，并希望我以正确的顺序进行编译。但是有些事情告诉我我有点过于复杂了，有一种更简单的方法。

有很多这样的基于 ruby​​/Linux 的库，我真的很想知道如何将它带入 VS2013，然后我可以为我想要的任何库做到这一点。

我确信为此类库（以及库本身）制作教程的人不会故意（如果有的话）排除 VS2013。我只是不知道如何让它们进入 VS2013。

任何帮助，将不胜感激。提前致谢。

爱苏西，到目前为止！现在我想要这个初始布局......

...在较小的屏幕上变成这种布局：

这可能使用 Susy 吗？此外，我希望 AC 列在它们位于同一列时作为单个实体运行，因为我想给它们粘性行为。

我已经与 Susy 合作了一段时间，遇到了一个我似乎无法弄清楚的用例。解释它的最好方法是以 Twitter 为例。

如果您查看他们的网站，您会看到他们使用三列标准布局，在 1250 处有一个断点。到达该点之后，整个最右边的第 3 列都位于第 1 列下方。

Susy 2 中的纯 CSS 是如何做到的？当我查看 twitter 时，他们似乎将内容从第 3 列物理移动到第 1 列。我假设这一切都是用 JS 完成的，但 id 宁愿做得更干净一些。想法？

我正在为一个项目使用 susy2，我想包含一个图像，该图像仅在左侧网格外流血，然后跨越网格内的 7 列。问题是，我不认为我可以只使用出血，因为出血量不是恒定的。

该图应该更好地解释我的目标：http: //i.stack.imgur.com/OFd6H.jpg

谢谢！

我有一个三列网格，并且使用该+span函数可以很好地定义列。因此，如果我想要一个元素跨越一列，我会这样做：

和两个：

ETC..

我现在想要一个元素跨越一列，但在位置 2，即在中间列。

Susy 文档说使用at关键字来指定位置，如下所示：

但是，这不起作用，我的专栏位于第一个位置，即左侧。

生成的CSS：

当我做

生成的CSS：

这工作正常，我的专栏在第三位。

如何使该位置起作用以使我的列位于第二位置？

一些有助于解释的图像：

在第一列：

在第 3 列：

我想要的是：

最后一个示例是通过以下方式实现的：

我认为这是一个 hack，这也意味着高度现在是错误的，因为没有浮动。我认为这不是你应该与 Susy 合作的方式。

版本：

指南针 1.0.1 苏西 2.1.3

我使用的是 .sass 文件，而不是 .scss