问题标签 [susy-next]

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 回答
1361 浏览

sass - 使用 Susy Next 在不同断点处切换装订线宽度

在我的样式表中,我调用了span,使用 Susy 的 mixin 来控制站点中使用的众多模块的宽度。

我现在需要在给定断点处更改网格间距宽度。而对于像 Foundation 使用的传统网格系统,我所需要的只是这样的媒体查询(假设我在元素上使用了类):

我看不出如何使用 Susy 做同样的事情。我所有的网格样式现在都是通过 mixins 提供的,所以我不再有明确的钩子来定位跨度。

如何在断点处切换装订线宽度,而无需为我使用过的每个地方添加单独的断点span

从 Susy 的文档看来,答案似乎是添加如下内容:

但是在我所有的模块中重复这个似乎有很多重复。

当然,这个问题不仅限于 Susy。使用 Compas 的 Vertical Rhythm 也会出现同样的问题。一旦节奏需要在断点处更改,唯一的选择是在使用垂直节奏功能的每个点显式声明断点的更改。

在这两种情况下 - 水平布局和垂直节奏,似乎都需要一个抽象层来允许集中更改跨模块传播并避免重复媒体查询的扩散。

需要明确的是,我绝不是批评这两个工具包。只是寻找使用它们的最佳方式。

0 投票
1 回答
388 浏览

susy-compass - Susy 2 中的排水沟是如何工作的?

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

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

生成的 CSS 为.mosaic

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

  1. 我如何达到预期的效果?
  2. 填充值 (1.85...%) 是如何计算的?
  3. 为什么它们不符合我的预期?
0 投票
1 回答
452 浏览

compass-sass - Susy 2 中的 gutter 函数/mixin 发生了什么?

这是我的 susy 配置

测试代码:

编译后他们什么都不返回...

或者

显示错误:无效的空操作:“15.75092% plus null”

有什么问题?

0 投票
1 回答
223 浏览

susy-sass - 使用流体网格 susy 自定义列宽

我想知道是否有办法在 susy 上更改列宽,但使用流体布局而不是静态布局。

0 投票
1 回答
86 浏览

susy-compass - Susy 中的排水沟作为元素之间的间距保持不变。奖励:更宽不起作用

susy 中的两个块之间有一个不需要的空间。wide尽管使用了该功能,但它似乎完全遵循网格的大小。

上面的代码,#main_side_img设置为1.75创建这个: 在此处输入图像描述

所以我设置了#main_side_imgto的值,2令我沮丧的是,两个盒子之间的空间保持不变,而排水沟只是移动了!

在此处输入图像描述

装订线保持不变,与我为 span 参数设置的值无关。

奖励:不是更宽应该填充左侧和右侧的排水沟吗?它在右侧填充 2 个排水沟宽度。