Code:

Since I am not familiar with less, I have been working on this function for one or two hours. The feature of this function is that the screen can be selectively added after it. I tried to put it in front of it, but it seems that indefinite parameters are not supported in front of it.

.choose(@type, @style) when (@type=xs) {@media screen and (max-width: 767.999999px) {@style(); } } .choose(@type, @style) when (@type=sm) { @media screen and (min-width: 768px) and (max-width: 991.99999 px) {@ style (); } } .choose(@type, @style) when (@type=md) { @media screen and (min-width: 992px) and (max-width: 1199.99999 px) {@ style (); } } .choose(@type, @style) when (@type=lg) { @media (min-width: 1200px) { @style(); } } .loop(@i,@style,@list) when (@i<length(@list)) { .choose(extract(@list,@i+1), @style); .loop(@i+1, @style, @list); } .media(@style,...) { .loop(0, @style, @arguments); }Copy the code

Usage:

.title {
  .media({
    color: red;
  }, xs, sm);
}
Copy the code

The compiled:

@media screen and (max-width: 767.999999px) {. Title {color: red; }} @media screen and (min-width: 768px) and (max-width: 991.9999px) {. Title {color: red; }}Copy the code