更改 Bourbon 默认 em 大小

Question

Bourbon.io 很棒，与 Neat 一起使用时甚至更好。默认的 1em 大小设置为 16px，如何将其更改为 14px？

// Overwrite the em-base
$em-base: 14px;

我知道这是正确的覆盖，但应该添加到哪里才能得到正确的结果？

Answer 1

我想你可以在调用 neat 之后添加它。看到这支笔：

http://codepen.io/mikehdesign/pen/jPmWza

@import "bourbon";
@import "neat";

$em-base: 16px;

div.container {
  @include outer-container;
  height: 100px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-size: em(14);
}

Answer 2

发布解决方案以供将来参考。

有两个步骤来完成这个和'overwrite the $em-base'全局：

1。添加新变量。

这可以在使用 !global 标志导入 bourbon/neat 后完成。

//Import Plugins
@import "bourbon"
@import "neat"

//Overwrite $em-base
$em-base: 14px !global;

2。确保使用新的 $em-base 变量来覆盖字体大小。

//Set font-size
html,
body {
 font-size: $em-base; //14px
}

您现在可以使用 bourbon em-function 来正确调整大小 em。

!! 重要的是要确保在根元素上设置字体大小 - (HTML)，这是定义像素的元素em 的大小。

这是一支笔http://codepen.io/matthewelsom/pen/WQPgQq

更改 Bourbon 默认 em 大小

Change Bourbon default em size

css

sass

neat

bourbon