Mixins should accept LESS blocks

[rbu]

It would be helpful if mixins had access to a content block passed to them, so one could encapsulate media queries or browser hacks in a central place and reference them symbolically.

This is basically the "Passing Content Blocks to a Mixin" feature of SASS:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-content

In LESS this would mean something like:

.mobile() {
  @media all and (max-device-width: 480px) {
    @content
  }
}
.big-desktop-button {
  ...
  .mobile {
    display:none;
  }
}

[dwt]

Oh, I need this too!

[caseyohara]

+1

[BruceClark]

Absolutely. Please!

[caseyohara]

I can see some collisions by adding this functionality to the normal mixin syntax. Just by looking, it would impossible to tell if the call above would compile to

.big-desktop-button .mobile {
  display: none;  
}

or

@media all and (max-device-width: 480px) {
  .big-desktop-button {
    display: none;    
  }
}

So I think it would need new syntax. Here is my idea.

Allow blocks of LESS to be passed into parametric mixins, as a normal positional parameter surrounded by braces.

.mobile(@content) {
  @media all and (max-device-width: 480px) {
    @content
  }
}

.big-desktop-button {
  ...
  .mobile({
    display:none;
  });
}

Due to variable scoping and evaluation, I imagine this would require that mixins that accept LESS content blocks can only accept content blocks.

[PiotrSkon]

+1 This is a must.

[Soviut]

+1 SASS can do this.

[cescalante]

+1

[matthew-dean]

I don't understand these examples. What is @content defined as in the first example?

[chimericdream]

With SASS, you can pass a whole content block to a mixin independent of the parameters. So you have something like this:

.mobile() {
    @media your-query-here {
        @content
    }
}

.someclass {
    // some general styles here
    .mobile() {
        // your mobile styles here
    }
}

that would compile to:

.someclass {
    // some general styles here
}

@media your-query-here {
    .someclass {
        // your mobile styles here
    }
}

I'm adding my support for this. Real logic operators (if/else) and this feature are the biggest things keeping me from using LESS at this point.

[davidrivers]

+1!!!

[jonschlinkert]

I'm still confused by this. Some real world examples of this being used would really help a lot. I tried to read through the SASS docs, but I still struggled with it. It sounds like @content is really just passing a literal block of CSS to the bottom of the inheriting declaration block. Is that right?

[davidrivers]

@jonschlinkert You're right. It's extremely useful when you need a "wrapper" selector. For example, I have a project where we have to share the page with styles from a third-party, so we "pseudo-namespace" our styles in order to make them more specific than the third party styles. We do this by wrapping all of our styles with an arbitrary selector, and we can nest styles within that selector and leverage the fact that a complex selector such as .wrapper .module { /* styles here*/ } is more specific than most or all of our third-party's selectors (and therefor shouldn't be affected by them since we also embed our own "reset" styles on that wrapper before specifying styles that we want).

Another use for having an arbitrary selector to wrap styles is if you want to reuse Sass or Less "modules" between different projects or documents and for some reason you need to give them different wrapper hooks in your markup (or want the flexibility to do so).

My use cases are attempting to bridge the fact that the CSS cascade lacks a concept of a true namespace, but you can leverage a stylesheet preprocessor to get something practically close to one. "Media query bubbling" is a similar use case (since it allows "blocks" of styles to be passed around and wrapped with different selectors), although I don't know how Less supports this internally, but a cursory Google search suggests that Less does support this feature.

[jonschlinkert]

@davidrivers thanks, the wrapper analogy helps, that's sort of how I saw it in my mind. Looking at this semantically, this is a better use case for the term @include than @content, which makes no sense to me here. (Sass had to pick a different term since they used @include for mixins.)

David if you find some time, would you mind adding some detailed code examples here so when @MatthewDL and @lukeapage review again they can make a better evaluation of this? thanks!

[matthew-dean]

Yes, LESS supports media query bubbling. There's probably ways to do namespacing as you describe, but like @jonschlinkert, the examples are still a head-scratcher. That is, I can't see how it's not currently supported. You can segment code into, say, mobile-specific definitions using variables / mixin guards.