@media 在 mixin 中(lessphp)

@media in mixin (lessphp)

我想用这样的媒体查询制作自己的 mixin。

@maxWidth: 1170px;

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

但是mixin 中的@media 不起作用。是否支持lessphp?如果没有,我该如何解决?

P.S。我不想在我所有的 .less 文件中复制很多这个规则(@media screen 和(最大宽度:@maxWidth))。

谢谢!

考虑为您需要的断点使用变量,例如:

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

@media @maxWidth {
   color: red;
 }

一个例子: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