captures.scss

// A named buffer. Will append to existing content captured there.
// The buffer can be accessed via get-capture("foo") or @emit "foo".
@capture "foo" {
  @media screen {
    .asdf {
      .qwerty {
        /* This is a comment */
        color: red;
      }
    }
  }
}

// Capture into a variable. If the variable is already is a map, the variable is
// set to a new map that is the merged result of the existing value and the captured styles.
// Defines the variable in the current scope if it isn't yet defined.
@capture into $some-capture-var {
  @media screen {
    .asdf { 
      .qwerty {
        /* This is a comment */
        color: red;
      }
    }
  }
}

// Captures the following data structure:

$captured: (
  ("@media" : "screen") : (
    (".asdf" ".qwerty") : (
      "/*": " This is a comment ",
      "color": red
    )
  )
)

// The captured content can be placed with a directive:
@emit "foo";
@emit from $some-capture-var;

@mixin render-capture($capture) {
  @each $key, $value in $capture {
    @if typeof($key) == "map" {
      $directive: nth(map-keys($key), 1);
      $directive-value: map-get($key, $directive)
        // It seems bad that there's no way to generate an unknown directive from this data structure
        // and that we have to enumerate all the possible directives with basically identical code.
        // Perhaps we should have a @css-directive directive?
      @if $directive == "@media" {
        @media #{$directive-value} {
          @include render-capture($value);
        }
      }
      @else if $directive == "@supports" {
        @supports #{$directive-value} {
          @include render-capture($value);
        }
      }
      @else {
        @warn "I don't know how to render #{$directive}";
      }
    } @else if typeof($key) == "list" {
      #{$key} {
        @include render-capture($value);
      }
    } @else if typeof($key) == "string" {
      @if $key == "/*" {
        /*#{$value}*/
      } @else {
        #{$key}: $value;
      }
    }
  }
}

@include render-capture(capture("foo"));

// So what's the point of all this?

@include transform-left-to-right {
  .sidebar { float: left; }
  // there's a really compelling use case to allow sass imports from this point in the code.
  // Doing this would require dynamic importing: https://github.com/nex3/sass/issues/739
  // and to allow mixins to be defined in places that are not at the top level.
}
// => .sidebar { float: right; }

@include darken-all-the-colors(15%) {
  .dropdown { color: red; background: blue; }
}
// => .dropdown { color: #b30000, background: #0000b3; }

@mixin transform-left-to-right {
  @if $rtl {
    @capture into $content {
       @content;
    }
    @each $thing in $content {
      ...
    }
  }
  @else {
    @content
  }
}