Migration Guide from Susy 2 to Susy 3

[bs-thomas]

Hello there,

I was wondering if there is some sort of migration or upgrade guide from Susy 2 to Susy 3? I just did an npm-check-updates recently, bring my version up from 2 to 3. However, when I try to compile, it's bringing up errors like below. I understand these mixins are removed, but I'm a bit lost from there as to how I should upgrade.

Error: no mixin named container
Thanks!!

[mirisuzanne]

That's a great idea, and doesn't exist yet.

I imagine a number of larger projects will want to stay on 2 for the time being, and we'll continue to support that. I'll try to write an update guide soon, though.

[thomasdebruin]

would be really helpful, i love susy2, but find it hard to adopt susy3, partly due to getting used to flexbox, but some common examples/use cases would be helpful (in susy 2 you would this, and susy 3 like this...)

[webmasterpf]

great update of the doc but search doesn't work for me.

[mirisuzanne]

@jgerigmeyer I can confirm that search isn't working on the Susy docs. Can you take a look at that?

[rootical]

Sorry for being ignorant, but I couldn't find exact place where the guide was. Tried to look for it with no results. Could you please point it out?

[mirisuzanne]

Sorry, it's not quite done yet. Jonny accepted this after fixing the search issue, but it's still open.

[melissjs]

Hi @mirisuzanne is there any update on this? Thank you!

[mirisuzanne]

There are a couple articles on the website that will get you started.

But I don't think I'll ever write a full 2-3 migration guide, because I would rather help people migrate off Susy entirely. Even the "Welcome to Susy3" article is primarily a guide to moving off Susy. The %-based approach that requires tools like Susy is a hold-over from the era of float layouts, particularly pre-box-sizing. CSS Flexbox (basically universal) and Grid (not far behind) both allow for more intelligent and intrinsic layout techniques, while box-sizing removes the need for complicated gutter math. There is no particular need for a tool like Susy unless you are still using float layouts, in which case you can stay on Susy2.

I recommend gridbyexample.com and youtube.com/layoutland if you want to start learning CSS Grid. Grid By Example even provides fallback code for common layout patterns.