Passing object of properties to a mixin

[benhutchins]

I am trying to find a way to pass an object of properties to a LESS mixin. The idea I am trying to implement is a media query with a simple polyfill for legacy browsers using predefined, standardized media queries from my library. I've attempted this in a few ways with no success.

This is completely valid LESS, however, it obviously doesn't do what I am wanting:

.media-query-desktop() {
  @media only screen and (min-width: 960px) {
    & {
      font: 1px; // want to copy the passed display: block;
    }
  }

  .viewport-desktop & {
    font: 1px; // want to copy the passed display: block;
  }
}

body {
  .media-query-desktop() {
    display: block;
  }
}

In the above example I'd like to pass an object of properties to .media-query-desktop. It acts like valid LESS because it actually thinks that I am redefining the .media-query-desktop mixin, so obviously this is not proper syntax. However, this does not work either:

.media-query-desktop(@properties) {
  @media only screen and (min-width: 960px) {
    & @properties;
  }

  .viewport-desktop & @properties;
}

body {
  .media-query-desktop({
    display: block;
  })
}

Is there a way to achieve this in LESS, I cannot think of a way to accomplish this. While it would not be optimal, I also cannot seem to pass a string in exchange for a properties object like:

.media-query-desktop(@properties) {
  @media only screen and (min-width: 960px) {
    & @properties;
  }

  .viewport-desktop & @properties;
}

body {
  .media-query-desktop("display: block");
}

Is there any way of accomplishing something similar to this?

[seven-phases-max]

This is #965 feature recently implemented with #1859 (expected to be available with the next major release). The syntax will be:

.media-query-desktop(@properties) {
    @media only screen and (min-width: 960px) {
        @properties();
    }
}

body {
    .media-query-desktop({
        display: block
    });
}

Until that is available you can use one the workarounds you'll find in #1264, #1648 etc. (see also all cross-referenced issues).
E.g. (using callbacks method):

.media-query(desktop) {
    @media only screen and (min-width: 960px) {
        .media-properties(desktop);
    }
}

body {
    .media-query(desktop);
    .media-properties(desktop) {
        display: block;
    }
}

[lukeapage]

Next minor release e.g 1.7.0 not 2.0.0