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

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.