Susy 2 and Breakpoint - susy

Question

I am finally transitioning over to Susy 2 from Susy One and have been struggling a bit with the new syntax. Specifically, using it with the Breakpoint mixin.
In Susy One, I had this:
// Mobile First Settings
.grid-construct{
$total-columns: $bp-sm-columns;
$column-width: $bp-sm-column-width;
$gutter-width: $bp-sm-gutter-width;
$grid-padding: $bp-sm-grid-padding;
$container-width: $bp-sm-container-width;
$container-style: $bp-sm-container-style;
#include container;
}
//for medium devices
#include breakpoint($breakpoint-md) {
.grid-construct {
$total-columns: $bp-md-columns;
$grid-padding: $bp-md-grid-padding;
#include container;
}
}
// large devices
#include breakpoint($breakpoint-lg) {
.grid-construct {
$total-columns: $bp-lg-columns;
$grid-padding: $bp-lg-grid-padding;
#include container;
}
}
I was then able to write styles such as:
.my-style{
margin-top: 10px;
#include breakpoint($breakpoint-md) {
margin-top: 20px;
}
#include breakpoint($breakpoint-lg) {
margin-top: 40px;
}
}
An example of my HTML markup:
<div class="grid-construct">
<div class="my-style">
Lorem ipsum
</div>
</div>
Is this pattern portable to Susy 2? Would I need to make 3 individual $susy maps for my 3 respective breakpoints?

Answer 1

In your example, the only thing changing at the different breakpoints is the size of the container based on number of total columns (Susy 2 doesn't have grid-padding because you can add that easily yourself). If you set up the basic $susy map the way you want it, you can use the shorthand to override that as you go:
.grid-construct {
#include container;
#include breakpoint($breakpoint-md) {
max-width: container($bp-md-columns);
}
#include breakpoint($breakpoint-lg) {
max-width: container($bp-lg-columns);
}
}
(I used the container function because that max-width is all you really need to override)
You can also use susy-breakpoint to change the settings for the entire breakpoint block:
#include susy-breakpoint($breakpoint-lg, $bp-lg-columns) {
#include container;
}