@media in mixin (lessphp)

Question

I would like to make own mixin wtih mediaqueries like this.

@maxWidth: 1170px;

.breakpoint(@maxWidth) {
  @media screen and (max-width: @maxWidth) {
    @content;
   }
 }

But @media in mixin doesn't work. Support it lessphp or not? If not, how can I fix it?

P.S. I don't want to make a lot of copies of this rule (@media screen and (max-width: @maxWidth)) in my all .less files.

Thanks!

Answer 1

Consider use variables for your needed breakpoints an example:

@maxWidth: ~"screen and (max-width: 1170px)";

@media @maxWidth {
   color: red;
 }

An example: http://lesscss.org/less-preview/#%7B%22less%22%3A%22%40maxWidth%3A%20~%5C%22screen%20and%20(max-width%3A%201170px)%5C%22%3B%5Cn%5Cn%40media%20%40maxWidth%20%7B%5Cn%20%20%20color%3A%20red%3B%5Cn%20%7D%22%7D