Asymmetrical grid error

[flaturtha]

I'm following excellent Zell Liew's examples from his book on Susy to develop my site, specifically trying to set up the asymmetrical grid system. However, despite following (even copy/pasting to ensure I didn't type incorrectly), I'm getting errors any time I define more than one column:

$susy: (
  output: isolate,
  global-box-sizing: border-box,
  debug: (image: show-columns)
  );

$small: (
  columns: 1 1.6857142857,
  gutter: 10/42,
  column-width: 42px,
);

@include layout($small);

I get the following error:

events.js:154
      throw er; // Unhandled 'error' event
      ^
Error: _assets/vendor/bower_components/susy/sass/susy/su/_grid.scss
Error: index out of bounds for `nth($list, $n)`
        on line 75 of _assets/vendor/bower_components/susy/sass/susy/su/_grid.scss
>>       $sub-columns: append($sub-columns, nth($columns, $i));
   -----------------------------------------^

The best I can figure, the error happens when the columns line has more than a single value. With just one (any number) value, it runs but with more than one for an asymmetrical grid, it errors.

I'm trying to recreate the Chapparal layout (http://www.sassmeister.com/gist/zellwk/258589c4035f6da40854) from Zell's book since I think it would work well for my site. But as it stands, I cannot use the asymmetrical grids with Susy.

Any help or hint what I've got set up wrong? I've dug through Google for 2 days trying to find a solution but nada. Thanks for any input that'll get me going again!

[mirisuzanne]

Hi @flaturtha, I'm not able to reproduce this on sassmeister. I wonder if you are on an older version of either Susy or Sass? Try upgrading both to the latest, and see if that helps?

[flaturtha]

@mirisuzanne, Thanks for the quick reply. I thought that might have been an issue and checked/updated my dependencies yesterday. I just checked and I have the latest version of SASS (3.4.22) and have my bower.json file set to use susy ^2.2.12. Don't know how to verify the Susy version other than that but I just got started and downloaded it a couple days ago (maybe last week) so I'm assuming its the latest/greatest version.

I also have LibSass (I saw that was an issue a while back on some related errors) running but updated it to the latest version yesterday, too. I've just updated my repot (https://github.com/flaturtha/charliechan) for this dev in case that helps. Hate to ask but since Zell's example works and you weren't able to reproduce this on sassmeister, its probably some other setting, something either in my project set up or my local system. In any case, I'll keep digging to see what I can figure out. Appreciate the help.

[mirisuzanne]

I think I found it. In layout/_header.scss you call span(3) — but your layout doesn't have 3 columns.

.logo {
  @include span(3);
  background: url('/assets/img/site/logo-full36.svg') center center no-repeat;
  margin: 0.7rem 0 0 0.5rem;
}

I'm going to leave this bug open, because we should provide a better error message.

[flaturtha]

Ha!! Sweet. That did it. I knew it had to be some goofy thing I was doing wrong. Thanks for finding it and resolving my issue. HUGE help.

Luvin' Susy, btw...great for a non-dev guy like me. Makes way more sense than HTML grid systems. Keep up the good work.