How to set the width AND max-width of a susy container

382 Views Asked by At

I would like to achieve this mixin natively with Susy:

@mixin mainContainer($width, $maxWidth) {
  width: $width;
  max-width: $maxWidth;
  margin-right: auto;
  margin-left: auto;
}

How can I do that?

Thanks!

1

There are 1 best solutions below

0
Miriam Suzanne On

The only reason to use Susy for this mixin is if you want Susy to provide one of those two values. If you plan to pass in both the width and max-width explicitly as arguments, there's no need to involve Susy at all.

I'll assume you do want Susy to provide one of the values, so I'll just guess which one, and let you change it if I guess wrong. In order to use Susy with customized output, you'll use the container() function instead of the container() mixin:

@mixin mainContainer($max-width, $susy: $susy) {
  width: container($susy);
  max-width: $max-width;
  margin-right: auto;
  margin-left: auto;
}