Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Problem with sizing the grid in ems. #24

Closed
scottmartin opened this Issue · 4 comments

2 participants

@scottmartin

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?

@scottmartin

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

@kaishin
Owner

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

@scottmartin

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
@kaishin
Owner

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

@dukex dukex referenced this issue from a commit in dukex/neat
@kaishin kaishin Return number type in em() to fix #24 18dd63a
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.