问题标签 [susy-compass]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1102 浏览

css - SCSS & Susy:不同方向的不同布局

我正在创建两种不同的布局:一种用于横向,一种用于纵向。横向布局具有更宽的列。我正在使用新版本的 Susy 来执行此操作。

这是我的代码:

但它不起作用。列保持相同大小(较小的纵向大小)。我怎样才能解决这个问题?

我页面上的其他响应式代码确实有效,只是网格不起作用!

Susy 文档有一整节是关于响应式网格的,但它有点复杂,并且没有讨论方向。我之前也问过这个问题,但是解决方案不起作用(我认为是因为解决方案是针对旧的 Susy 版本)。

感谢您提供的任何帮助!

0 投票
1 回答
3734 浏览

sass - 可以覆盖容器的默认装订线值吗?

是否可以使用基本值覆盖容器的默认装订线值,例如:

这样您就可以根据需要将装订线从 20px 最小化到例如仅 5px 或任何其他所需值。

是否可以通过mixin,我必须放置另一个容器/布局还是应该坚持使用纯CSS来解决该任务?谢谢

更新: 更具体地说,我不寻找排水沟的确切尺寸(据我目前所读,由于四舍五入,无论如何都会很困难),我只想最小化排水沟并扩大列间接宽度。

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

目前,我在包含的 7 列及其排水沟之前和之后挤压了 3 列。到目前为止,列及其图像的宽度太小。因此,我想缩小排水沟宽度并间接扩大列宽。

Susy 设置看起来是这样的:

到目前为止我还没有设置容器宽度,因为容器位于整个页面的包装器内。

屏幕截图中显示的图像矩阵的具体选择器如下:

您需要更多详细信息吗?那么您是否仍然建议使用 with-grid-settings mixin 来解决该问题?set-container-width mixin 真的有必要吗?想过如果我设置相对的东西就不需要绝对值吗?谢谢拉尔夫

更新 2:

Ufff 我尝试了下面评论中提到的建议的小秘密方法。但到目前为止,我无法得到一个干净的显示,更像是一个混乱的“拼凑而成”......;) 有点令人困惑。基本上文章作者推荐了2个步骤。首先,他为包含元素的内容添加了 -100% margin-right,然后在下一步中将对象推回原位。我在一系列尝试中的最后一个设置现在看起来像这样,但仍然没有解决方案。

我已将margin-right 放置在“li”的包含元素中的with-grid-settings mixin 中,如建议的那样。但问题是在哪里放置 pre mixin,尤其是它应该包含哪些数字(是否也考虑了 squish 数字的数字)?所有 li 的值是否相同,或者是否需要一个 for 循环将图像单独推送到它们的水平位置?li 元素中的 mixin 顺序是否正确?放在哪里重要吗?在跨度列和第 n 个欧米茄之间还是在最后或中间?总之,我仍然很困惑。网格、图像矩阵和 Susy 仍然让我的大脑不停转动。:/

更新 3:

谢谢!我终于让它工作了。最后,我对我的解决方案有两个问题:

for循环的布局会有更优雅的方式吗?其次,为什么这个版本和我注释掉 $count 时的版本一样:$count + 1; 语句导致相同的视觉结果?实际上注释掉了 push 变量没有第二个和第三个计数。知道为什么在没有 $count: $count + 1; 的情况下仍然有效吗?谢谢!

更新 4: 我玩了更多,结果证明以下版本就像一个魅力。似乎 $count 变量根本不需要,以及 push/pre mixin 中包含的值的增量增长。一个简单的 0 成功了。再次感谢您的帮助!!!

更新 5

我在下面的最后一条评论中已经提到,更新 4 中显示的示例并没有像乍一看那样好。我现在尝试完全重建 Palantir 文章中的建议。下面是 7x4 的 scss 部分以及视频中显示的 3x3 矩阵:https ://dl.dropbox.com/u/8578/matrix.mov

乍一看,矩阵看起来很破碎,但如果您仔细查看视频中的检查器,似乎每个元素都被推到两个矩阵中的正确水平位置。唯一的问题是每个 li 都包含在单独的行中。这是我能得到的最接近的版本。:/现在我不知道如何将这些部分放在一起以获得适当的矩阵。我或多或少地尝试了浮动和显示属性的可能性。但没有运气。有人可能有提示吗?

0 投票
4 回答
18150 浏览

compass-sass - 找不到或无法读取要导入的文件:susy

我只是无法弄清楚我的 Susy 设置有什么问题。我在 OS X 10.7.4

我一直跟着这里:http ://susy.oddbird.net/guides/getting-started/

错误

我安装的宝石:

我的 config.rb 文件位于项目的根目录中

_base.scss

屏幕.scss

我从目录 wpsvntree: compass create trunk -r susy -u susy with success运行了这个命令。

然后compass watch trunk/

查看我的项目,我看到了上面的第一个错误。

我看不出我哪里出错了。

谢谢。

0 投票
2 回答
849 浏览

css - 使用 rtl 和 ltr 的 compass 最小化重复 css 的最佳实践

当您的布局同时适用于 rtl 和 ltr 语言时,compass/sass 有什么方法可以帮助减少重复的 css 代码的数量?

0 投票
1 回答
956 浏览

grid - Susy 非移动优先

有没有办法让 Compass Susy 从大宽度到移动工作?

我首先了解移动设备以保持文件大小较小等,但从布局的角度来看,肯定构建一个完整的桌面版本并让断点删除宽度较窄的项目是最好的吗?

有什么想法吗?

0 投票
1 回答
133 浏览

susy-compass - 如何使用 Susy 在相同的垂直空间中布局左侧 1 行和右侧 2 行?

如何在 Susy 中实现以下布局?

及其相反:

到目前为止,对于上图,我尝试过:

结果是:

0 投票
1 回答
446 浏览

compass-sass - 尝试放大浏览器窗口时,响应式图像变得无响应

不知何故,我似乎一次又一次地遇到了与 Susy 一起处理的图像矩阵示例的问题。:/ 在准备通过应用媒体查询来完成项目时,我最初检查了当前状态并调整了浏览器窗口的大小。发生了以下情况:

https://dl.dropbox.com/u/8578/Resize.mov

两个显示的图像矩阵都由光栅图像组成。黑色图像矩阵可以毫无问题地调整大小和放大。但是第二个矩阵再次放大有问题。这是一个普通的 CSS 问题还是更多与 Susy 相关的问题?有没有办法解决它?:/

基本的 Susy 设置是:

对于图像,应用了以下内容:

第一个矩阵的 HTML 部分如下所示(我只输入了一个 li 元素 - 其他 27 个仅在标题和链接图像上有所不同):

第一个矩阵(7x4)的 Susy 和布局相关的 CSS 部分看起来是这样的:

第二个矩阵的 HTML 部分如下所示(我只输入了一个 li 元素 - 其他 8 个元素仅在标题和链接图像上有所不同):

第二个矩阵(3x3)的 Susy 和布局相关的 CSS 部分看起来是这样的——它们被分割了,因为它们位于不同的部分:

0 投票
1 回答
531 浏览

sass - Susy:使用 nth-omega mixin 时出错

我认为这会起作用:

但我收到此错误消息(在 CodeKit 中):

错误 screen.scss(_support.scss 的第 195 行:带有-only-support-for 的 Mixin 需要 6 个参数,但传递了 8 个。)

没有'@include nth-omega();' 我没有收到错误消息。'@include nth-omega(4);' 也没有工作。

0 投票
3 回答
6040 浏览

sass - 使用 sass、compass 和 susy 时在 codekit 上编译错误

每当我尝试保存在 codekit 中链接的 .scss 文件时,都会收到以下错误:

“Compass 无法编译项目中的一个或多个文件:

LoadError on line 161 of /Applications/CodeKit.app/Contents/Resources/engines/compass/bin/../lib/compass/configuration/data.rb: no such file to load -- susy 使用 --trace 运行查看完整的回溯”

有谁知道为什么?在我解决这个问题之前,我无法继续。我已尝试更新和卸载/安装所有这些 gem 以及 codekit 本身。

有人可以帮帮我吗?提前致谢!

0 投票
1 回答
411 浏览

iphone - iPhone Mobile safari:Susy 网格在较短的页面上缩放到高度而不是宽度

我在让 iPhone 的 Mobile Safari 缩放按预期工作时遇到问题。我将 Susy 用于网格:

我正在使用这个视口元标记:

问题是某些页面在 iPhone 上没有完全按比例缩小。这似乎仅在页面的高度小于其宽度时才会发生。因此,页面不会看到页面的整个宽度,而是按比例缩小,直到它在高度方向上填满视口。“更长”的页面按预期缩小。

我不确定如何解决此问题。我用网格和元标记尝试了几种不同的方法,但无济于事。