Susy 2 and Breakpoint

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;
}