CODEWITHSUNDEEP
sasssusy-compass
Matty Balaam
Matty Balaam

Reputation: 1309

Adjusting Susy $grid-padding at breakpoints

I’ve hacked around this before by writing my own mixins, but I get a feeling there must be an inbuilt method in Susy to get around this problem.

I have a mobile-first grid which uses my default $grid-padding, say 1.5em, but once I hit my first breakpoint I switch to a wider $grid-padding-tablet, perhaps 3em, and so on through other breakpoints.

In addition, some elements also use the bleed mixin to give the visual impressions of infinite width.

Is there an easy way, just using something like @include container rather than building my own media queries and mixins to accomplish this?

Upvotes: 0

Views: 475

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

The built-in technique for this is the with-grid-settings mixin (documentation):

@include at-breakpoint($tablet) {
  @include with-grid-settings($padding: $grid-padding-tablet) {
    // your tablet code here
  }
}

Upvotes: 2

Related Questions