less - Set "min-width" or "max-width" in a media query passing a parameter to a mixin -

i make dynamic min/max suffix in properties defined in less mediaquery.

i wrote code not compile:

@screen-md: 800px;  .mediaquery(@min-max, @size)  {   @media screen , (@{min-max}-width: @size)    {      @{min-max}-width:100px;   } }  header  {   background-color: blue;    .mediaquery ( @min-max: max, @size: @screen-md ); } 

while @{min-max}-width:100px; correct syntax, equivalent applied in mediaquery definition not allowed, need set sometime "max-width" value, , others "min-width" value in media queries. how obtain this?

option 1: (using variable , interpolation)

you can below

.mediaquery(@min-max, @size) {       @mediaquery: ~"screen , (@{min-max}-width: @{size})";       @media @mediaquery {             @{min-max}-width:100px;       } } 

---

option 2: (using guards)

you can use guards in mixin below check value passed @min-max parameter , output appropriate css based on it.

.mediaquery(@min-max, @size){     & when (@min-max = min) {         @media screen , (min-width: @size) {             min-width:100px;         }     }     & when (@min-max = max) {         @media screen , (max-width: @size) {             max-width:100px;         }     } } 

---

when above mixin called below (with either of options mentioned above):

header  {   background-color: blue;   .mediaquery ( @min-max: max, @size: @screen-md ); }  div{   background-color: red;   .mediaquery ( @min-max: min, @size: @screen-md ); } 

it compile below css:

header {     background-color: blue; } @media screen , (max-width: 800px) {     header {         max-width: 100px;     } } div {     background-color: red; } @media screen , (min-width: 800px) {     div {         min-width: 100px;     } }