1

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!

Egor
  • 248
  • 7
  • 17
  • Well, Less does not have magic `@content` directive - mixins parameters incl. rules [should be passed explicitly](http://lesscss.org/features/#detached-rulesets-feature). Though `lessphp` is too outdated compiler that does not support too many today's features, so you're rather trapped with limited Less dialect or need to consider more up-to-date alternatives like `less.php`. – seven-phases-max Jan 18 '16 at 08:55
  • Thank you! I decided to remove all files related with lessphp from my WordPress theme and after a long search I supposed that with SCSS it will be easier and better to make cool features – Egor Jan 18 '16 at 16:45

1 Answers1

0

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

Vangel Tzo
  • 8,885
  • 3
  • 26
  • 32
  • thanks it's work, but I want make **one mixin with inner @media**, and use this mixin in all files, I assume that this is impossible - one mixin with **@media** for all files with less – Egor Jan 18 '16 at 07:33