问题标签 [bourbon]

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

sass - 如何将 Yeoman 与 Bourbon 而不是 Compass 一起使用?

我将如何设置 Yeoman + Grunt.js 以在没有 Compass 的情况下编译 Sass?我想使用 thinkbot 的Bourbon而不是 Compass。我需要为此创建一个自定义生成器,还是将标志传递给现有的 Yeoman 生成器?

0 投票
3 回答
4232 浏览

css - Bourbon 整齐的多个断点

我知道以下可以用波旁威士忌完成:

然后我可以做这样的事情:

它工作得很好。现在我必须添加影响手机和平板电脑的样式。我正在寻找手机和平板电脑断点的结合。

0 投票
1 回答
560 浏览

sass - 我怎样才能让波旁威士忌在盒子大小方面对 Firefox 表现得很好

在我的 scss 文件中,我有

根据这里的波旁文件

这会在 Chrome 中产生所需的结果,但不会在 Firefox 中产生。如果我手动应用 box-sizing ,它会按需要工作。

我错过了什么?

0 投票
3 回答
1558 浏览

import - 更改中间人 CSS 目录

我的中间人网站有一个问题。我有两个问题我无法弄清楚:

  1. 如何将我的“index.html.erb”文件引用的“all.css.scss”文件移动到“Sass”文件夹?当然,当我移动它时,链接会断开。似乎无法在代码中找到更新路径的位置。这是我可以在 bash 中做的事情吗?

文件在我的 github 上

0 投票
1 回答
1659 浏览

css - 使用 CSS、Rails、Bourbon 和 Neat 滑出导航

我正在做我的第一个 Rails 项目,我真的很难让滑动菜单在 Bourbon / Neat 上运行。我最近的尝试围绕着尝试使用 CSS :target 和 Neat 的 Shift() 混合。我要分解的地方是在哪里/如何包含 mixin 以及在哪里/如何实例化实际的班次。这就是我尝试纯 CSS 的地方......

这描述了两个元素( nav 和 holder )的定位。从理论上讲,导航几乎完全脱离画布并在悬停时滑入。然而,这根本没有发生。正在发生的事情是导航直接显示在持有人身上,持有人被下拉到导航下方。没有什么是脱离画布的,也没有任何变化。下面我将发布转换的 CSS 和生成的 html。

和..

我已经查看了 Neat 的 Shift() mixin,但是关于它的文档很少。老实说,我不知道这是否对我有用,或者如果是这样的话如何实施。整洁的文档中总共有 3 行。任何帮助、提示,或者,真的,任何不是非常侮辱的东西都将不胜感激。

0 投票
6 回答
7152 浏览

bourbon - 使用 Bourbon Neat 改变外容器尺寸

我正在学习使用 Bourbon Neat,并且一直使用 Bootstrap 的网格系统。我正在尝试重新创建此 Bootstrap 网格页面以了解 Bourbon Neat 的基础知识。

我使用的设置是:

我确定了我的断点并使用新的断点函数设置它们,我还可以在其中更改列数。

但我想要改变的是容器大小。在 Bootstrap 中,容器的最大宽度变化如下:

@media >1200px:最大宽度:1170px;

@media >992px:最大宽度 970px;

@media >768px:最大宽度:750px;

然而,在 Bourbon Neat 中,最大宽度使用变量设置一次。我目前将其设置为max-width: em(1170);如何让此容器大小发生变化?如何使用 Bourbon Neat 而不是 Bootstrap 3 实现相同的示例页面?我知道在 Susy 中你可以设置容器宽度

0 投票
1 回答
521 浏览

css - 禁用波旁径向渐变后备颜色?

在 Bourbon 中使用径向渐变混合时,我宁愿不应用后备。

文档http://bourbon.io/docs/#radial-gradient说它是可选的,但无论我尝试什么,都会应用原色(我尝试输入 false、null 或 none 作为 $fallback)。

非常感谢任何提示。谢谢!

0 投票
1 回答
685 浏览

css - .scss、媒体查询、@content 和 bourbon 整洁

我正在使用 Bourbon Neat,但我希望编译后的 css 不要继续为每个元素重复媒体查询,而是先按移动设备的顺序编译它。

我的 scss 看起来像这样

如何实现更清晰有组织的编译 css?

这是我目前得到的:

我尝试通过在顶部执行此操作来使用@content 技术:

并将@include 更改为:

任何帮助,将不胜感激 :)

0 投票
1 回答
3415 浏览

sass - Bourbon neat horizontal align div after display none

I have a header with 3 elements at full size layout (12 column grid):

left= logo (3 columns), middle= nav (6 columns), right= social media (3 columns)

At a smaller size (4 column grid) I've set "social media" to display none, "logo" and "nav" are both two column. They are not horizontally aligned the second element displays under the first both spanning two columns but not next to each other. I've tried floating, clearing and all that jazz but no joy.

Here is the HTML:

Here is the scss:

Any help with this would be great.

Many thanks in advance, Alex

0 投票
1 回答
1235 浏览

ruby - Grunt:通过 'require' 添加 gem 依赖项

这是我的 Gruntfile 的 SASS grunt-contrib-sass部分:

我想要做的是同时需要 Foundation 框架和 Bourbon mixin 库。当我尝试编译时,它说在 Foundation 文件中读取的路径不可读(或提供),即使它们安装在我的系统上(我过去曾在 Compass 中使用过 Codekit,但想远离它)。有没有什么特别的事情我必须做添加才能拉入这些宝石?谢谢!