0

I want to have a fluid grid that is generally 80% the width of the screen, with a maximum width of 1440px, but below 768px is 100% the width of the screen instead of 80%.

With just one setting for "container", I'm not sure the best way to approach this, or how possible it is.

My current settings are:

$susy: (
    columns: 12,
    container: 80%,
    column-width: 20rem,
    gutters: $gutter/10rem,
    math: fluid,
    output: float,
    gutter-position: inside-static
);

I tried to override those settings conditionally based on breakpoints like this:

@include breakpoint($mini) {
    $susy: (
        container: 100%
    );
}


@include breakpoint($huge) {
    $susy: (
        container: 1440px
    );
}

but that wouldn't work because that's not how breakpoints work.

Is there a way to achieve this kind of layout with Susy? It's a fairly common pattern as far as I have seen (hence my being tasked with acheiving it), and I don't want to need to override every time there is a container invoked.

Damon
  • 10,493
  • 16
  • 86
  • 144
  • possible duplicate of [Using Sass Variables with CSS3 Media Queries](http://stackoverflow.com/questions/9122195/using-sass-variables-with-css3-media-queries) – cimmanon Jan 26 '15 at 18:02
  • My suggested (impossible) solution is similar to the problem in that question, but the issue itself is a little bit outside of that. Maybe. I'm wondering about what's possible within Susy, which may have separate mechanisms for achieving what I'm after in a semi-straightforward way – Damon Jan 26 '15 at 18:16
  • Susy doesn't have magic powers. It still has to obey rules of "what's possible" within the confines of Sass. – cimmanon Jan 26 '15 at 18:17
  • Understood. I'm not saying the code I provided *should* work. I'm trying to come to a non-excruciating way of achieving a pretty common layout paradigm within Susy. – Damon Jan 26 '15 at 18:23

0 Answers0