layout.scss

// ----------------------------------------------
// I want to define the important layout settings

// $columns: <integer> | <list>;
$columns: 12;

// $gutters: <ratio>;
$gutters: .25;

// $column-width: auto | <length>;
$column-width: auto;

// $container: auto | <length>;
$container: auto;

// -----------------------------------------------------
// I want to store an entire layout in a single variable
//
// - [container], columns, spacing
// - container is an (optional) length
// - columns can be an integer or list
// - spacing defines column-to-gutter size as two lengths, or single float ratio
//   (these can be used to set $column-width and $gutters)

$symmetrical: 4 .25;
$symmetrical-specific: 960px 12 (60px 20px);
$symmetrical-extended: (1 1 1 1) .25;

$asymmetrical: (1 3 5 2 1) .25;
$asymmetrical-specific: 80% (1 3 5 2 1) (3em 1em);

// --------------------------------------------------
// I want to override all the global settings at once

$any-layout: 660px 12 (60px 20px);

@include set-layout($any-layout);

// ------------------------------------------
// I want to use explicit breakpoint handling
//
// - set a breakpoint (using breakpoint plugin)
// - set a layout

$breakpoint: 50em;
$large: 12 .25;

@include breakpoint($break) {
  @include layout($large) {
    /* do what I want */
  }
}

// ---------------------------------------
// I to return the width of a column-group
//
// - columns
// - [optional] context
// - [optional] location

$width: span(3);
$nested: span(3 of 6);
$asymmetric: span(3 at 3 of (1 3 5 4 2));
$shortcut: span(last 3 of (1 3 5 4 2));

// ---------------------------------------------
// I want to return the width of a single gutter
//
// - [optional] context

$gutter: gutter();
$gutter: gutter(6);
$gutter: gutter(1 3 5 6 4 2);

1a) I'm not sure I understand the first part of this concern. What do you mean about the mental model?

1b) I see how min+max is a problem for something like your automated context-finding magic, but I find it very useful otherwise. My proposal is to drop any tight media-query integration for now. Using breakpoint() along with layout() is both flexible and completely de-coupled. Adding in at-breakpoint() functionality later is simply a matter of sugar, and I think magical-context-finding should be as well. Let's drop it all for now, and re-visit at the sugar phase?

2. Yeah, $default-layout was dumb. I've split out the different parts of a layout into initial default variables, and added a mixin for setting them all at once using the shorthand syntax. Now layout() { ... } establishes settings within its @content while set-layout() simply overrides the variables globally.

3. Good question, I haven't addressed it yet, but I don't think we have anything that will conflict (I haven't thought carefully about flexbox though). I've also expanded the setting options so that static would be a possible output (we have to know actual widths for that one, not just relative ratios). I don't consider this document complete - I'm still trying to think through all the implications.

static wouldn't be on the same level as float/isolate/flexbox of course - that would be a different thing, but still an output-related setting.

Now that I think about it, I wonder what flexbox grids actually would look like. I don't really know. Has anyone done a lot of work on that?