Problem with sizing the grid in ems. #24

scottmartin opened this Issue Nov 3, 2012 · 4 comments


None yet
2 participants

In the readme for Neat it says that the three variables used to size the grid can be set in either px or em. So, since I try to not use pixels unless I have to, I set up a grid using the following:

$column: em(58, 14);
$gutter: em(24, 14);
$grid-columns: 12;
$max-width: em(960, 14);

Now anytime I try to use an @include media call I get the following error:

Undefined operation: "12 times 4.14286em".

Am I missing something? Should I just always use px?

The problem seems to be with using the em() helper function. When I hard code the actual em values it works just fine.

kaishin commented Nov 4, 2012

Where did you define these variables? You might need to import neat/neat-helpers if this file doesn't import Neat.

My files look like this;

// application.css.scss
@import 'normalize';
@import 'bourbon';
@import 'variables';
@import 'neat';
@import 'mixins';

// _variables.scss
@import 'neat-helpers';

$column: em(58, 14);
$gutter: em(24, 14);
$grid-columns: 12;
$max-width: em(960, 14);

$small: new-breakpoint(max-width 480px, 2);
$medium: new-breakpoint(min-width 480px, 4);
$large: new-breakpoint(min-width 870px);

@kaishin kaishin closed this in c1b1400 Nov 5, 2012

kaishin commented Nov 5, 2012

@scottmartin That was indeed a bug in the em() function. Thanks!

dukex pushed a commit to dukex/neat that referenced this issue Dec 28, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment