Can't get susy-svg-grid() to compile

[IAMtheIAM]

I followed the docs but my function is not compiling. The css output is the same as the .scss input. The final output is: background: susy-svg-grid() no-repeat scroll; chrome warns Invalid property value

@import '../../../node_modules/susy/sass/susy';
@import '../../../node_modules/susy/sass/plugins/svg-grid/prefix';

$susy: (
   columns: susy-repeat(24),
   container: $hd-widescreen,
   spread: 'narrow',
   container-spread: 'narrow',
   global-box-sizing: border-box,
   gutters: 1/4, //<gutter-width>/<column-width> = // 20px gutters & 70px columns
   gutter-position: after
);

   .card-container {
      background: susy-svg-grid() no-repeat scroll;
      width: span(12 of 24);
   }

What am I doing wrong?

Also, does the plugin need to be imported before the $susy settings object or can it be imported after?

Lastly, which element should receive the susy-svg-grid() function? The body, the element with span(12), the container of the element with span(12), etc? It was not clear in the docs. Thanks, Susy rocks! I've been using it for years.

[mirisuzanne]

Hi @IAMtheIAM –

I'm having trouble reproducing your error, so it's hard to debug the problem. Everything in your code looks fine to me, and works when I copy/paste into my own project. I assume you're seeing the error in the chrome inspector? What CSS output are you seeing from the code above?

To answer your other questions:

• Your $susy configuration and imports can happen in any order, as long as they both happen before you start using the functions
• You can use susy-svg-grid anywhere you want to see a grid background, but your current code will show a 24-column background (the global default) on a 12-column span. If you want to show just the 12-columns spanned, you can use susy-svg-grid(12 of 24). If you want the full 24-columns, you should apply the grid to a full-width element, like the body or any other parent containers.

Also: global-box-sizing, container, and gutter-position have all been removed from Susy3. Keeping them doesn't hurt anything – you can add any data you want in the $susy map – but those settings aren't used by any of the Susy3 functions. If you do store data there for your own use, susy-get('key-name') will access it for you – e.g. susy-get('container').

[IAMtheIAM]

Hi, I'm still looking into this. The output i get for the compiled CSS is

   .card-container {
      background: susy-svg-grid() no-repeat scroll;
      width: span(12 of 24);
   }

so it appears to not be compiling that.

Thanks for the other answers, I cleaned up my config a bit more now.

[mirisuzanne]

If it's not compiling, that likely means the function isn't available – something wrong with the import maybe?

[IAMtheIAM]

Hello. I still can't seem to figure out how to get the new SVG grid to appear. In my code I have this:

// scss file
.card-container.main {
      background: susy-svg-grid() no-repeat scroll;
      width: span(18 of 24);
      margin: 20px gutter(2 of 24) 20px 0;
}

and it compiles to this css:

// browser
 .card-container.main {
   background: susy-svg-grid() no-repeat scroll;
    width: 74.78992%;
    margin: 20px 0.84034% 20px 0;
}

So the span() and gutter() functions compile fine, but not the susy-svg-grid() nor the svg-grid()

Does it need to be imported specially?

My grid setup:

@import '../../../../node_modules/susy/sass/susy';
@import '../../../../node_modules/susy/sass/plugins/svg-grid';

$susy: (
   columns: susy-repeat(24),
   spread: 'narrow',
   container-spread: 'narrow',
   gutters: 1/1 //<gutter-width>/<column-width>
);

[IAMtheIAM]

The example docs also say

scss
.grid {
  background: susy-svg-grid() no-repeat scroll;
}

css compiled
.grid {
  background: susy-svg-grid() no-repeat scroll;
}

So that's a little confusing. Is it supposed to compile?

[IAMtheIAM]

Wait, I figured it out. Silly me. I'm using webpack and sass-vars-loader. I had another reference to @import susy in my mixins file which is prepended to all sass files, and I forgot that I have to import the plugin there, so the mixin is available. So you were right, something was wrong with the import.

I forgot to include the plugin in the sass-vars-loader import. Thanks again for making susy, it's great.