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

Question

I would like to make dynamic MIN/MAX suffix in properties defined in a Less MediaQuery.

I wrote this code but it does not compile:

@screen-md: 800px;

.MEDIAQUERY(@min-max, @size) 
{
  @media screen and (@{min-max}-width: @size) 
  { 
    @{min-max}-width:100px;
  }
}

header 
{
  background-color: blue;

  .MEDIAQUERY ( @min-max: max, @size: @screen-md );
}

While @{min-max}-width:100px; is a correct syntax, equivalent applied in Mediaquery definition is not allowed, but I need to set sometime "max-width" value, and others "min-width" value in my media queries. How to obtain this?

Harry · Accepted Answer · 2014-11-13T10:44:15.267

2

Option 1: (Using a variable and interpolation)

You can do it like below

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

Option 2: (Using Guards)

You can use guards in the mixin like below to check what was the value that was passed for the @min-max parameter and then output the appropriate CSS based on it.

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

When the above mixin is called like below (with either of the 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 would compile into the below CSS:

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

edited Nov 13 '14 at 10:44

answered Nov 13 '14 at 10:24

Harry

87,580
25
202
214

Yes, could be a solution, but I thought that could be possible to get the same result in more compact way using mechanism like `@{...}` or ~"...", etc... so one of "syntax workaround" that often solve problems like this... I hope that LESS team could make possible my original syntax sooner or later, is clearly more compact and much intuitive. – Luca Detomi Nov 13 '14 at 10:31
1

I don't think that is possible mate. But maybe leave the question open and see if any better answer comes your way. I will also try and see. – Harry Nov 13 '14 at 10:31
@LucaDetomi: I stand corrected mate. It is perfectly possible to achieve it in a more compact way. Please refer to Option 1 in my answer. – Harry Nov 13 '14 at 10:39
GREAT!!!!! just one thing, I thought that use of `~` results in a "string printed as is" and that `@{min-max}-width` will not be interpreted.... Can you explain me why this correctly run? Thank you. – Luca Detomi Nov 13 '14 at 10:44
2

Yes, generally it prints the string as is, but when we use the `@{var}` syntax, it prints the corresponding variable's value. – Harry Nov 13 '14 at 10:47

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

1 Answers1