A way to handle complex grid contexts

[zellwk]

It can be difficult and confusing to work with multiple nested context when the site gets big, especially if we are working with asymmetric grids.

We need to use the nested() mixin to create contexts, resulting in code like

$susy: (
  columns: 1 2 3 4 5
);

.parent {
  @include span(3 at 2); 
}

// Complicated context retrieving takes place here
.child {
  @include nested(3 of map-get($large, columns) at 2) {
    @include span(2 last);
  }
}

I thought of a way to store the context and retrieve it whenever needed

The code above will become:

.parent {
  // Stores nested(3 at 2) as "parent" in a $contexts map
  @include span-ac(3 at 2, parent); 
}

.child {
  // retrieves "parent" context from $contexts map
  @include with-context(parent) {
    @include span(2 last);
  }
}

Optionally, you can also set flags for different breakpoints:

.parent {
  // Stores nested(3 at 2) as "parent: (large: <context>)" in a $contexts map
  @include span-ac(3 at 2, parent, large); 
}

.child {
  // retrieves "parent: (large)" context from $contexts map
  @include with-context(parent, large) {
    @include span(2 last);
  }
}

Here's a Demo on Sassmeister:

Play with this gist on SassMeister.

<script src="http://cdn.sassmeister.com/js/embed.js" async></script>

Its working pretty well for me right now. Will anyone be interested in this?

[mirisuzanne]

That's an interesting idea. I'm not opposed to something like that, but is it really needed?

You're making the current solution harder than it needs to be. You can already pass the entire $large map as context, without getting just the columns:

  @include nested(3 of $large at 2) {
    @include span(2 last);
  }

[mirisuzanne]

The advantage of your solution is that it allows you to create any new named context on the fly. That is a pretty slick feature. span currently takes a single argument, so not hard to add a second one to the existing mixin if we want to go that route. We could also add a keyword like "as"?

I wonder if this feature could serve double-purpose?

.initial {
  @include span(last 2 of (1 2 4 6 3 1) as sidebar-right);
}

// Nested Context
.nested {
 @include span(1 of sidebar-right);
}

// Similar Span
.similar {
  @include span(sidebar-right);
}

[zellwk]

The beauty of this is that you can make it work with deep nested contexts as well, which means you don't have to remember and calculate the context at a later stage. It's going to be helpful if we're working with asymmetric grids since that's more complex.

What you suggested is cool, "as" sounds like a great keyword to use for this feature, and I hadn't thought of the .similar before. It might be very useful indeed.

How about handling contexts at different media queries then? Do we leave it to the users?

.initial {
  @include span(last 2 of (1 2 4 6 3 1) as sidebar-right);

  @include breakpoint(600px) {
    @include span(last 2 of (1 3 3 4 4 4) as sidebar-right-large);
  }
}

.nested {
  @include nested(sidebar-right) {
    @include span(1 of sidebar-right);
  }

  // This currently does not work with asymmetric grids because it uses with-layout()
  @include susy-breakpoint(600px, sidebar-right-large) {
    @include span(1);
  }

  // This might work with the current code 
  @include breakpoint(600px) {
    @include nested(sidebar-right-large) {
       @include span(1)
     }
  }
}

What do you think?