Feature Request: Support For Multiple Content Blocks

There are lots of situations where people are using mixins to render templated styles out with some configurable parameters, for example I use a mixin to render floated lists which allows me to configure the direction of float, spacing, whether the spacing is added before or after the element, and the element or class to use for list items. In this situation, being able to pass in a content block is great and means I don’t have to repeat the selector to add additional styles for the list item that haven’t been provided by the mixin, for example color or outline.

However what if I want to style the last item slightly differently, or the first? I am left having to repeat the selector to target these elements. The same is true of many mixins, for example a mixin that generates buttons, which might handle background-color and color for each state, but might not handle text-decoration. Again, the mixin might support a content block, but only for the button’s default state. I have to write new selectors for :hover etc.

I think these issues could be solved by adding support for named content blocks, much as you can pass multiple lambdas to a method in Ruby. For example (I’m not suggesting this particular syntax, but include it to show what I mean):

@include floated-list(left, 20px, before) {
    border-left: 1px solid black;
} [first-child] {
    border-left: none;
} [last-child] {
    color: grey;
}

[Undistraction]

Although on second thoughts, I think that solves a different issue. The beauty of passing multiple blocks is exactly that you aren’t constricted to a set of predefined arguments. Unless I’m missing a use case?

By supporting named blocks, a mixin can both render and allow customisation of selectors. At the moment, if a mixin renders more than one selector, the only way to add additional props to additional selectors is by duplicating the selectors outside the mixin (or within the @content block).

For example, I can use @content in a simple mixin:

@mixin example(){

    .alpha {
        // Mixin supplies props
        // …
        // User supplies props
        @content;
    }

}

But what about:

@mixin example(){

    .alpha {
        // Mixin supplies props
        // …
        // User supplies props
        @content;
    }

    .beta {
        // Mixin supplies props
        // …
        // No way for user to supply props other than a duplicate selector
    }

}

But with named blocks:

@mixin example(){

    .alpha {
        // Mixin supplies props
        // …
        // User supplies props
        @content[alpha];
    }

    .beta {
        // Mixin supplies props
        // …
        // User supplies props
        @content[beta];
    }

}

[whaaaley]

I updated my previous example to use multiple selectors, like you said. I’m starting to see the benefit. It’s a neat idea, but what about using placeholders sort of backwards instead? It’s not as pretty, but it’s close.

@mixin foobar {
  @content;

  &.start {
    background: red;
    @extend %start !optional;
  }

  &.end {
    background: blue;
    @extend %end !optional;
  }
}

li {
  @include foobar {
    margin: 25px;

    @at-root { // at-root to scope the use of the placeholders to li and to remove li from output
      %start {
        margin: 50px;
      }

      %end {
        margin: 100px;
      }
    }
  }
}

Outputs:

li.start {
  margin: 50px;
}

li.end {
  margin: 100px;
}

li.start {
  background: red;
}

li.end {
  background: blue;
}