问题标签 [susy-sass]

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 投票
2 回答
963 浏览

internet-explorer-8 - susy 2 gallery mixin 与 IE8 不兼容。解决方法?

因此,susy2 中超级有用的 'gallery' mixin 使用了 nth-child 选择器,这在 IE8 中不起作用。那么有什么好的解决方法呢?

我正在考虑扩展画廊 mixin 并添加特定于 ie8 的样式。susy有可能吗?

这是我的 sass 代码,如果有帮助的话:

这是看到此 SASS(简化)转换为 css 的要点: http: //sassmeister.com/gist/59927698cfbba6fadbf5

这是我想要的外观: 画廊外观

0 投票
1 回答
382 浏览

susy-sass - 将 Susy 添加到现有的 grunt 构建中

我有一个使用 grunt 构建的现有项目,并想添加 Susy。没有 Susy,构建工作正常。

看起来断点应该与 Susy 一起使用。这两个都要求 Sass 至少是 V3.3。从 CLI 来看,它是:Sass 3.3.10 (Maptastic Maple)。

我使用 Gem Compass 获取最新版本的 Compass(Compass 0.12.6)。但它使用(并安装)了与 Susy 和 Breakpoint 不兼容的 sass 版本(sass-3.2.19.gem)。

在 grunt 中将 Susy 添加到 Compass 任务后,我得到:

Gem::LoadError on line ["2064"] of /home/paul/.rvm/rubies/ruby-2.1.0/lib/ruby/site_ruby/2.1.0/rubygems/specification.rb: 无法激活 susy-2.1 .2,因为 sass-3.2.19 与 sass (~> 3.3.0) 冲突

我想尽量减少对 Ruby 的使用。这个项目没有 config.rb。(这意味着我不希望得到像“使用捆绑器”这样的解决方案。)

我想我一定缺少一些基本的东西。

0 投票
1 回答
360 浏览

susy-compass - Susy 2 调试网格:可以更改单个网格颜色吗?

当调试网格重叠时,我在视觉上描绘各个网格时遇到问题。可以指定颜色吗?

谢谢!

0 投票
1 回答
53 浏览

gruntjs - 如何让 Susy 1 工作?

我完全被这整个 susy/compass 搞糊涂了。如果我只是尝试包含 susy,那么我会收到大量关于断点不存在之类的错误。谷歌搜索说他们是一个 susy 1 的东西。好的,所以我尝试使用它,但现在由于版本而出现有关 susy/sass 冲突的错误。有些网站说使用 compass-susy-plugin,其他网站说不,那不是第 1 版。

有没有人有一个体面的安装指南来让 susy/compass/grunt 一起玩得很好?

0 投票
1 回答
259 浏览

susy-compass - 使用 Susy 定位元素

我有一堆用 HTML5 定义的文章,如下所示:

每篇文章都有这些完全相同的元素。使用 Susy 2.x 我试图弄清楚如何放置东西,使图像位于左上角,下方有空白空间(即第 1 列),然后向右,占据其余宽度页面,我有一个垂直布局,其中 <h2> 高于 <p> 高于 <a class="appstore">。

您可以在这张图片中看到我正在寻找的所需格式:

所需格式

我的样式按我想要的方式工作,但至于布局......我很确定我现在必须使用“@include span”的东西,但玩了一个小时后我就是无法正确. 谢谢!

0 投票
1 回答
117 浏览

responsive-design - 在 Susy 2 中将流体站点更改为两个固定断点

我使用 Susy 2/breakpoint 为客户端创建了一个流畅的站点但是他们想要更改站点以显示小于 320 像素的移动布局,然后在任何高于 321 像素的设备上缩小桌面(例如加载固定宽度的站点)。

有没有办法改变 Susy 设置,所以我不必重写它固定宽度,我应该知道视口元标记中的任何内容吗?

0 投票
1 回答
1361 浏览

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

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

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

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

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

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

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

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

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

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

0 投票
2 回答
2614 浏览

css - 如何使用 Susy 在不同的页面上生成不同的布局?

我使用 Susy 2.1.3 作为网格系统。我有一个包含元素,它在不同的模板上有不同的装订线。我已经声明了两种不同的布局,并认为我正确地调用了它们。但是,最后定义的布局是适用于任何地方的布局。在下面的代码中,即使在.home页面上也应用了 $onepx-gutters 布局。

我的 SCSS 代码很像:

生成的 CSS 代码类似于:

如您所见,它不会生成单独的实例,.home .item-width-2并且.products .item-width-2每个实例具有不同的边距。

0 投票
1 回答
427 浏览

grid - 使用从一列中删除的排水沟到另一列的 witdh - Susy

见下文:

请点击此处查看图片,问题为 http://imgr.es/26LP

我不能用填充添加排水沟,因为我正在使用Paul Irish global box sizing

遵循我的代码:

0 投票
2 回答
262 浏览

sass - 无法让 Compass 观看我的 Susy 项目

我是命令行新手。我所做的最远的事情是成功安装了 Foundation 的 sass 版本。我想试用 Susy,看看它是否更适合我的需求。我正在关注 Scott Tolinski 的 11 个关于升级 Tuts 的 Susy 教程的系列视频。我在安装过程中一步一步跟着他,直到我的根文件夹中的“指南针手表”命令。然后我被抛出了这个错误:

我安装的宝石是:

  • 指南针 (1.0.0.rc.0, 0.12.7)
  • 指南针核心 (1.0.0.rc.0)
  • 指南针导入一次 (1.0.4)
  • 萨斯 (3.4.0.rc.2, 3.2.19)
  • 苏西 (2.1.3)