Applying a set of styles both with a media query and with nested rules

Question

I am working on an application which responds to different screen resolutions. At a certain minimum DPI, we want to apply a set of styles. We also want to apply that same set of styles if the class hidpi is present on the root html element. Our project uses LESS.

This is the code I inherited. I've replaced the styles with some placeholders for the sake of this question (so don't mind the colors):

@media all and (min-resolution: 96dpi) {
  .foo {
    color: "maize";
  }
  .bar {
    color: "blue";
  }
}

html.hidpi {
  .foo {
    color: "maize";
  }
  .bar {
    color: "blue";
  }
}

Attempt at reducing duplication

As you can see, the code between the media query and html.hidpi is exactly the same, so I figured I should be able to reduce duplication. I came up with a solution using a mixin:

.mixinHidpi() {
  .foo {
    color: "maize";
  }
  .bar {
    color: "blue";
  }
}

@media all and (min-resolution: 96dpi) {
  .mixinHidpi();
}

html.hidpi {
  .mixinHidpi();
}

Can any more be done to reduce duplication? Are there any problems with the way I'm doing things now? In particular, I've only ever seen very simple examples of using mixins, so I'm not sure if I'm using them in the way they are supposed to be used.

Answer 1

You usage of the mixin will work and although it is not pretty there is not much else that can be done as far as valid LESS / CSS output.

I've written up an example of complex mixins like below. LESS lazy mixin for element width/height/float

As well as one that might be on track with what you are trying to accomplish. https://stackoverflow.com/questions/39338429/less-outputs-extra-semicolon

Keep in mind that this using a JavaScript array in a hacky type mannor and the output would still need to be sanitized of the extrenious code that is not valid. But I think we are both headed in the same direction.