问题标签 [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 回答
84 浏览

html - Thumbnails not displaying correctly

I am new to Neat. i am trying to create a thumbnail grid gallery. Now I have set the grid with no margin and no padding in li but somehow the gap is there between the first row and second row. its the gap between li and the image in it at the bottom. ive marked the li to red to show the gap. can you tell me where am i doing wrong with css. thanks.

here is the css

And here is the Html

i've also uploaded a demo so you can have a look over here. thanks.Demo

0 投票
1 回答
633 浏览

macos - 为 Mac 的 Hammer 添加 Neat、Bitters 和 Refill

我最近为 Mac 购买了 Hammer。

我正在制作一个静态网站,并希望使用 Bourbon + Neat、Bitters 和 Refills 来设置页面样式。

如果我是正确的,波旁威士忌已经包含在 Hammer 中,但 Neat、Bitters 和 Refills 不是?在 Hammer for Mac 主页上,关于安装 Neat 的内容如下:

“如果您在 Hammer 中使用出色的 Bourbon Neat 框架,您需要从 Neat GitHub 存储库下载 Neat 代码。Neat 的 SCSS 文件位于 app/assets/stylesheets 目录中。要在您的项目,只需将 app/assets/stylesheets 的内容复制到项目中的文件夹中。然后只需在 SCSS 或 Sass 文件中使用 @import "neat"; 即可使用 Neat。"....

我做到了。我认为它与包含苦味剂和补充品一样需要做。

然后我尝试使用@import“整洁”;我的 main.scss 中的命令,但构建总是失败。

关于如何让它发挥作用的任何想法?

谢谢!

0 投票
3 回答
2792 浏览

sass - Bourbon Neat:如何扩展列以匹配外部容器?

我正在测试 Bourbon Neat,我在一个外部容器中有两列,我希望这些列的高度相同(与最高的列一样高)。在短列上使用 @include fill-parent 不起作用,它只会使其与外部容器一样宽。我可以用 javascript 来做,但 Neat 不处理这个吗?

这是我的html:

这是我的 SASS:`

这是一张说明问题的图片。 谢谢阅读。

编辑:现在,我只是使用 jQuery 来手动均衡列大小,但如果有更整洁的方式(哈哈)来解决这个问题,请告诉我。

0 投票
1 回答
83 浏览

bourbon - 为什么没有在新断点上覆盖 omega(value)?

这是 Sassmeister 上的代码,如果链接有任何问题,请告诉我:http: //sassmeister.com/gist/0b7c3a1897fe3bbe33db

我有一个 $tablet 和 $bigscreen 断点,它们使用最小宽度值。

有一个带有 omega(2n) 值的 $tablet 屏幕的媒体查询。然后我有另一个带有 omega(4n) 值的 $bigscreen 断点。我的目标是在 $bigscreen 上每行显示三张图片,在 $tablet 上显示两张图片,在较小的屏幕上显示一张。

如果您检查代码,您可以看到 2n 个 tablet 的值仍然存在于 $bigscreen 上,导致所有块不适合并撞到下一行。这不应该被新的断点覆盖吗?

对 Neat 来说相对较新,如果您有任何建议或有用的提示,将不胜感激!谢谢!

0 投票
1 回答
161 浏览

sass - SASS 编译顺序:分配给未在某些代码中编译的变量的函数输出

我正在使用波旁威士忌和 SASS 风味的 Bootstrap。这是我的基本 SCSS 文件:

我的想法是我首先引入 Bourbon,因为我打算在所有地方都使用它,调用swatches.scss以设置应用程序范围的变量,调用 Bootstrap(它使用一些样本),然后在顶部自定义我的应用程序引导程序。swatches.scss看起来像这样:

不知何故,Bootstrap 没有接收到编译后的输出$gradient-blue——它接收的是未编译的字符串linear-gradient( #0089ca, #006cb9 )。代码 in调用(或扩展名)theme.scss没有问题。$gradient-blue%gradient-blue

我本来希望$gradient-blue编译一次就完成了。这怎么没有发生?

0 投票
2 回答
501 浏览

css - Bourbon 的 @font-face 混合找到字体但不会显示它

我正在尝试使用 bourbon 的 font-face mixin 让这种字体显示在我的页面标题上。

我的代码如下:

这应该将我的 .header 的字体设置为 3dumb 但它没有。该字体是默认浏览器字体。

我的字体存储在 assets/fonts/3dumb 中,我使用的是 rails 4。

这里有人知道如何解决这个问题吗?

在此先感谢,本

0 投票
3 回答
1210 浏览

jquery - 无法使用波旁威士忌笔芯

我正在尝试使用 refills bourbon 来使用他们的 css 库。据我了解,我所要做的就是复制并粘贴他们的 css 和 html,它应该可以工作。但是当我尝试时css没有生效。

我已将链接添加到 css 文件并添加了 jquery 链接,但它仍然无法正常工作。据我所知,使用填充剂时不需要红宝石。如果我遗漏任何步骤,请告知谢谢。

HTML 文件

CSS 文件

0 投票
1 回答
1740 浏览

frameworks - 使用带有苦味和整洁的波旁威士忌

我想在我的下一个项目中使用带有 Neat 和 Bitters 的波旁威士忌。我已经安装了所有三个,但我不知道如何继续。

我是在我的项目文件夹中分别使用这三个文件夹,还是需要将不同的导入添加到 _bourbon.scss 以便我将所有导入都放在一个主文件中?

例如,Bourbon(在插件中)和Bitters(在扩展中)文件夹中有button.scss、clearfix.scss和hide-text.scss,它们一起使用不会冲突吗?

感谢所有帮助:)

0 投票
1 回答
549 浏览

sass - Bourbon Neat Grid,在移动断点处

我有一个非常基本的网站,它使用 sass 和 bourbon 整洁的网格框架。我试图达到与(http://neat.bourbon.io/examples/)网站相同的效果。在 800 像素宽度处,网格似乎有一个断点并删除跨度列并转到 100% 宽度。

下面的代码输出一个包装器和两个 4 和 8 跨度 div。当我将浏览器缩小到 300 像素时,网格仍然保留,并且标题和内容 div 不会中断并全宽 100%。

我怎样才能达到这个效果?我已经尝试将 div 默认设置为 100%,并在断点处添加跨度列,但这不起作用。谢谢。

0 投票
1 回答
1221 浏览

css - Bourbon size() mixin 中的变量

我最近开始使用 Bourbon SASS 插件的更新版本。我以前使用自定义 mixin 来设置widthandheight使用以下语法;

这将假定px为测量单位。然而,随着波旁威士忌的更新版本,它有自己的size()mixin,它的工作方式不太一样。

我无法弄清楚如何将变量用于宽度和高度属性。我尝试了以下无济于事;

@include size(#{$width}px #{$height}px);- 插值似乎不能直接在 mixin 中工作。我尝试通过创建一个末尾有单位的新变量来做类似的事情。

最后,我尝试像这样设置变量,因为我在其他地方使用了类似的语法(尽管不是用于 mixin);

编译时我没有收到任何错误SCSS,而是样式表中缺少宽度和高度属性。我可以确认使用这样的字符串值:@include size(350px 200px);确实有效,我只是无法让变量与这个 mixin 一起玩得很好。有任何想法吗?

更新:虽然我仍然无法让波旁威士忌大小混合使用变量,但我仍然可以使用我之前使用的自定义版本,只要它是在我的项目中包含波旁威士忌之后定义的。作为参考,这是我使用的 size mixin,适用于我曾经扔过的所有东西;