Susy grid background

Question

I have these styles:

+with-layout(8 1/4)
  .fact-circle-container
    +container(show)
    +clearfix
    font-size: 4px
    padding: 0 30px

    li
      +gallery(2)

My grid items line up correctly. In this case each <li> spans two of the 8 columns but when I turn on the grid background display as shown above, I get the following output:

Any idea why it is doing this? Surely I should be seeing 8 columns?

Thanks, Neil

Update 1:

So, the background-size statement that is being out is outputting incorrectly like this background-size: 8.47458%, 100% 1.5;

It seems to be adding my base line height setting to the end for some reason. I ahve confirmed this by altering my $base-line-height variable to something strange like 7.5 and this alters the output to: background-size: 8.47458%, 100% 7.5;

A bit more of my code including the initial base line height setting is below:

// Line heights
// ============
$base-line-height:                  7.5;
$header-line-height:                1.25;

// Font weights
// ============
$base-font-weight:                  400;
$header-font-weight:                700;

// Font colours
// ============
$base-font-color:                   $color-nt-grey;
$base-link-color:                   $color-nt-bright-blue;
$base-link-hover-color:             saturate($base-link-color, 20%);
$base-link-visited-color:           saturate($base-link-color, 20%);

// Other sizes
// ===========
$base-border-radius: 3px;
$base-spacing: $base-line-height * 1em;
$base-z-index: 0;

$fixed-font-family:                 "Andale Mono", AndaleMono, monospace;
$fixed-font-size:                   15px;
$fixed-line-height:                 1.2;

$base-background-color: $color-white;

$separator-width:                   1px;
$separator-style:                   dashed;
$separator-color:                   $color-nt-dark-blue;

$rhythm-unit:                       'rem';

$p-margin:                          0.7  * $base-font-size;
$list-indent:                       20px;

// Susy grid settings
// ==================
$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: 1440px,
  container-position: center,
  columns: 12,
  gutters: .25,
  column-width: false,
  global-box-sizing: border-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

Any ideas why the line height is being added here for no apparent reason?

Answer 1

Susy background grid uses background-size to turn a single column gradient (what you see there) into the correct number of repeating columns (the 8 that you expect). I'd guess you are overriding that background-size setting somewhere else, in code that you have not included here?

But I can't reproduce the error with the code you've pasted, so that's just a guess.

Update:

Your base-line-height is being output as part of Susy's integration with Compass — in order to show your baseline grid as well as your column grid. The Compass base-line-height is set in px, which would work here. Clearly we should be a little smarter about that integration. Can you file an issue on Github?

In the meantime, you can solve it by using show-columns instead of show when you want to see your background grid.

 +container(show-columns)

As a side note, the container mixin includes a clearfix, so your clearfix mixin is redundant in this case.