问题标签 [bourbon]

我正在使用 Bourbon Neat 创建一些响应式布局。但是，我发现我使用的媒体查询偏移了大约 70 像素。我为平板电脑设置了 640 像素的断点（如 CSS 检查器中所示

但是，当我尝试调整屏幕时，chrome 告诉我媒体查询仅在窗口位于 ~580px 时应用......我很困惑为什么会这样，我不知道问题可能出在哪里。

感谢您的帮助！

I would give a try to bourbon sass framework, so I start installing it.

As I want to use it along with yeoman/angular-generator I had to downgrade Bourbon to v3.2.1 and Neat to v1.5 to avoid compiling error.

After downgrading no problem, they are working fine.

Now I would like to add Bitters, so, following the docs I run:

as output I got as expected

then I moved to sass folder and when I try to run:

I get this error output:

I get the same running bitters -v

Any Idea on how to solve this?

Thanks

我想使用 Bourbon/Neat 创建一个灵活的响应式网格，它不仅可以改变列数，还允许我跨断点配置列之间的装订线间距。

所以理论上，这样的事情会起作用：

这目前给了我一个灵活的列数，但 column:gutter 比例保持不变。

我已经研究了singularity.gs，但不想将Compass 作为依赖项引入。

有人有修复/解决方法吗？

我想用thoughtbot 的波旁威士忌和整洁的方式制作我的octopress 博客模板。我找不到任何从头开始涵盖 octopress（或其根，jekyll）主题的文档。所以，我决定自定义 octopress 默认主题。

我已经添加了相关的宝石Gemfile：

然后，我在.themes路径下复制了默认主题，例如：

我已将sass文件夹设为bourtlen空。然后在里面sass，我跑了：

所有波旁威士忌资产现在都在sass. 然后，我在下面添加screen.scss了sass：

毕竟，我已经安装了我的新生主题，但是当我点击命令生成站点时，我收到了这些警告和错误：

站点毕竟在本地运行，但由于（可能）这些错误和警告而没有效果。我想知道缺少什么。

当我使用 Bourbon 创建主题时，出现以下错误：

这是 中的代码_background.scss，因为它在其Github 存储库中：

我使用 Sass 3.3.14 和 Compass 1.0.0.rc.1 来创建主题，以获得波旁威士忌的全部好处。

更新：

（糟糕，我忘了说 Neat 或 Bitters。我也在使用它们。对不起。）

我已经按照 Bitters 的Github 指南中的描述更新了文件：

但是会发生同样的错误。

我想为不同的浏览器提供不同的字体（见这个问题）。

有没有一种巧妙的方法可以用 Sass/Bourbon 做到这一点？

这是我到目前为止所拥有的：

我正在使用他们网站上的 Bourbon SCSS/SASS 导航菜单示例： http ://refills.bourbon.io/ （粘贴在此消息底部的代码以保留以防在波旁网站上进行编辑）

我更改了 SCSS 代码中的第一行：

说10em。

这导致导航项目 10em 向左移动。

当我进入 Firefox 的下拉菜单时，一切正常。
在 chrome 中尝试同样的事情，并且有一个非常有限的范围可以将注意力集中在下拉菜单上，如果你离开那个狭窄的范围，菜单就会消失（当移动非常缓慢时）。此外，即使停留在狭窄的范围内并沿着项目移动光标，下拉菜单也会在第一个项目之后消失。

如何让它在 chrome 中正常运行？

注意：有没有类似 jsfiddle 的方式来演示代码以便于编辑？

编辑：

我发现，由于我使用的是同一页面中的另一个示例，其中设备（某些智能手机）相对于其容器 div 过大，这就是导致菜单在 chrome 中消失的原因。在Firefox中它工作得很好。它与 .device 类中的转换有关（我知道这一点，因为删除它会使其正常工作）。如果有人能找到解决方案，我会留下这个问题。

HTML：

SCSS：

JS：（在这种情况下不需要）

波旁威士忌font-url 在这里使用。

Rails 有font_url我相当肯定的方法是被调用的。但是，我找不到这两件事之间的联系。我已经探索了 bourbon、sass、sass-rais 和 rails 的代码库。

在哪里font-url定义，和/或它与rails之间的连接font_url？

更新

澄清：我的最终目标是在 ruby​​land 中定义我自己的助手，它们是 font_url 的兄弟。

我不觉得整洁的网格是真正流畅的。流体网格可以很好地从移动设备扩展到大型电视屏幕，例如1920x1080. 然而，整洁和苦涩最终工作的方式会创建一个$max-width默认设置为 1088 的变量。即使您更改此设置，但网站将停止流动的大小，即最大大小。我觉得无论屏幕大小如何，流畅的布局都会不断增长和缩小。

目前我解决这个问题的方法是使用fill-parent

这可行，但感觉很hacky，有没有办法使用整洁来正确创建一个完全流动的网格？设置最大宽度有它的限制。

我最近开始研究 Bourbon 和 Neat 以在我的个人网站上使用，并可能用于未来的项目。

我正在尝试重新创建从左到右、从右到左的交替布局。与此类似：http ://www.plunkettassociates.co.uk/services/

其中有 48% 的列包含文本，然后是 48% 的列包含图像。然后，此布局在页面下方左右交替。关键是 DOM 结构是相同的。CSS 用于控制 48% 列的位置和边距。

有人可以解释如何使用整洁来实现这种交替布局吗？