0

Bourbon.io is great, even better when used with Neat. The default 1em size is set to 16px, how do you change that to 14px?

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

I know that is the correct overwrite, but where should be added to get the correct result?

matthewelsom
  • 944
  • 1
  • 10
  • 21

2 Answers2

2

Posting the solution for future reference.

There are two steps to complete this and 'overwrite the $em-base' globally:

1. Add the new variable.

This can be done after importing bourbon/neat by using the !global flag.

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

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

2. Make sure the new $em-base variable is used to overwrite the font-size.

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

You can now use the bourbon em-function to correctly size with em.

!! It is important to make sure that the font size is set on the root element - (HTML), this is the element that defines the pixel size of the em.

Here is a Pen http://codepen.io/matthewelsom/pen/WQPgQq

matthewelsom
  • 944
  • 1
  • 10
  • 21
0

I think you can just add it after neat is called. See this pen:

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);
}
Mike Harrison
  • 1,020
  • 2
  • 15
  • 42
  • If you do this but set $em-base: 14px; and font-size: 1em; what do you expect the result to be? In my head it should be 14px... but it isn't... I hijacked your pen and added this at the top of the sass... http://codepen.io/matthewelsom/pen/WQPgQq – matthewelsom Nov 17 '15 at 04:34