问题标签 [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 投票
1 回答
61 浏览

css - 如何将列高固定为另一个在整洁中更大的列高?

我一直在使用粉底,我对整洁是全新的。我想知道如何将列高 wqual 设置为第二列高度或最小高度等于第二列。 谢谢。

问题图片

谢谢。

0 投票
1 回答
512 浏览

sass - Sass/Bourbon .css 输出与 @font-face mixin 有错误

我正在使用默认的 Sass/Bourbon mixin font-face.scss 但生成的 css 是错误的,出于某种原因将body标签嵌套在@font-face. 它生成 CSS 时我没有错误,但字体当然没有显示。

有任何想法吗?

CSS 输出:

SCSS:

0 投票
1 回答
402 浏览

sass - Sass @each 将变量传递给 mixin

我正在尝试使用 Bourbon Neat 网格混合器为网格创建一些类似 BS 的类。我的代码如下所示:

我想要发生的是:

Grunt 构建日志说:

所以我想不通的是为什么我不能将值从 $num 传递给 mixin。

0 投票
3 回答
3038 浏览

ruby - “波旁威士忌”的导入在 Je​​kyll 设置中不起作用

我正在使用Jekyll创建一个静态网站,并希望使用该框架Bourbon来构建我的 CSS。

我已经安装了Jekyll并想通过使用和运行将Bourbon添加到我的Gemfile来安装它。gem 'bourbon'bundle install

现在,当我将规则添加@import 'bourbon';到我的 SCSS 文件并开始运行 Jekyll时,jekyll serve -w它会启动,但是当我修改我的 SCSS 文件时,Jekyll 观察者会抛出一个错误说:

这里有什么问题?不应该像这样导入它还是Jekyll不支持这个?

0 投票
1 回答
170 浏览

internet-explorer-8 - Bourbon Refills:IE8 中的标签

有谁知道如何让 Bourbon Refills 的标签在 IE8 中工作?

我不断地将标签堆叠在一起而不是并排。

我添加了 Selectivizr,认为它可以纠正这种情况,但只能修复 Neat 中的网格。

0 投票
2 回答
327 浏览

css - 在 SASS 中定义断点

我在这里很困惑。我将 Sass 用于 Bourbon Neat,但我无法使用 Neat 设置断点。不知何故,它们无法在移动设备和浏览器中正确显示。这是代码

但不知何故,他们不工作。我应该像这样使用最小值和最大值吗

请给我一些建议,因为我完全无法找到解决方案。谢谢。

0 投票
3 回答
3340 浏览

sass - 使用 Thoughtbot Bourbon/Neat 重新排序列

我正在寻找关于如何使用 Thoughtbot 的 Neat 网格框架在不同断点处重新排序/移动列位置的最佳解决方案?

我想从这个(以桌面分辨率)转移我的标题中的元素: 在此处输入图像描述

对此(移动分辨率):

在此处输入图像描述

我的 HTML 如下所示:

并且 SCSS 看起来像这样(为了清楚起见,我删除了与实际布局无关的任何内容,如果相关,我将该标题的完整 SCSS 代码放在这个 gist上):

我基本上想知道在 Bourbon/Neat中模仿 Zurb基金会的推/拉重新排序功能的最佳/最优雅的方式是什么。

非常感谢您的任何建议/帮助!

0 投票
1 回答
81 浏览

css - 为什么使用整洁生成媒体查询时输出错误

好的,所以我有一个项目,我使用 SASS 使用 gulp 编译成 CSS,我使用 Bourbon 和 Neat 来构建网格系统。我觉得很奇怪,以下内容还没有响应。

翡翠模板:

SASS 为它

然后我尝试通过设置断点来测试$mobile: @mixin new-breakpoint(max-width 480px 4)

我发现当我使用@include media($mobile)编译后的 CSS 的输出是这样的:

为什么它输出(min-width: (+max-width) 480px 4)......整洁有什么问题吗?

0 投票
3 回答
4519 浏览

html - 使用 Bourbon Neat 删除跨度列上的边距

我开始将 Thoughtbot 的 Bourbon Neat 用于响应式网格。总的来说,它非常漂亮,我真的很喜欢它,但我在一个小问题上挂断了电话。

我试图让两列在没有边距的情况下相互对接,但是在尝试从他们的示例中复制它们的内容之后,我没有得到相同的结果。

这是示例 HTML:

这是我的 SCSS:

产生这个:

在此处输入图像描述

但是,当我尝试使用 table 方法使两列相互嵌套/对接时,如他们的示例所示,我得到了这个:

SCSS:

输出:

在此处输入图像描述

如果我走可行的@include omega();路线,但它不会扩大最后一列的整个宽度:

SCSS:

输出:

在此处输入图像描述

本质上,我可以省略容器部分中的内容,这些内容会产生我正在寻找的结果。div但是,为了实现这一目标,是否有必要创建一个空?:

SCSS

HTML(其中的内容.container被注释掉):

输出: 在此处输入图像描述

无论如何,我不知道实现这一目标的“正确”方式是什么。该文档并没有真正具体解释如何让两列相互嵌套。从我试图在他们的例子中复制的内容来看,并没有产生相同的结果。

除非我需要margin:0;在最后一列专门添加一个。

0 投票
1 回答
141 浏览

css - 整洁的发射 Css,宽度为容器 NaN%

我创建了一个演示整洁的项目并在 Sass 中给它列。这是代码。

现在,当我看到emmited Css 时,这很有趣

为什么会显示Nan%? 请告诉我我在哪里做错了?谢谢。