Rem in Susy Grid setup

Question

I have built a site using Susy and the grid was specified in em's but due to hitting an issue, I need to change the grid settings to use rems.

My base font size set on html is 16px and this is the setup for Susy grid settings:

$total-columns    : 16
$column-width     : remCalc(51.25px)
$gutter-width     : remCalc(10px)
$grid-padding     : remCalc(10px)
$container-style  : magic

The remCalc function is:

@function remCalc($pxWidth)
  @return parseInt($pxWidth) / parseInt($base-font-size) * 1rem

But when compiling this I get:

(Line 146 of _functions.scss: 0.01031em/rem is not a unitless number for `percentage')

Using rem or the main grid settings would solve my issues. I also updated Susy to 1.0.8 from 1.0.3 but that has had no effect either.

Any ideas?

Answer 1

Try this in your configuration:

// Vertical Rhythm Config
$rhythm-unit          : rem;
$base-rhythm-unit     : <number>rem;
$relative-font-sizing : true;

// Susy Config
$column-width : <number>rem;
$gutter-width : <number>rem;
$grid-padding : <number>rem;

Where <number> is your preferred sizing. $rhythm-unit is the operative variable though, you might need to go to an alpha version of Compass to get it though, and maybe even Susy 1.0.9 as well.

You can use the rem mixin (included with Susy) for creating fallbacks to px. ie:

@include rem(height, image-height('image.png'));

As long as you leave $base-font-size and $base-line-height the same, I think you'll be ok. If you do get weird sizing just go through and tweak your values. susy-grid-background would probably help you get through any weirdness as well.

Edit: I also think you want to be using whole numbers for your base grid sizes. Your conversion is probably messing with how Susy does the math to create the grid.

Answer 2

This was solved by updating the unit on another Sass variable elsewhere in the project. Jesse's answer, whilst not solving this issue, is also extremely helpful and useful.