LESS CSS set variables in media query?

Question

I\'m working on a iPad-specific website. To make my website work on both the retina display iPad and older versions of iPads, I want to set a variable in LESS CSS in media q

Answer 1

For those who might allow supporting relatively modern browsers only (Chrome 49+, FF 31+, no IE), you can use css variables instead.

Here is browser support table from "Can I Use".

html {
    --width-var: 300px;

    @media only screen and (max-width: 750px) {
        --width-var: 200px;
   }
}

.your-class {
    max-width: calc( var(--width-var) * 2 );
    .... // tons of other props
}

With the code above, whenever screen is getting smaller than 750px, max-width property from .your-class is recalculated (since --width-var is changed), and of course when screen is resized to be bigger - css variable gets back to its original value.

Answer 2

With less we can define variables for media query.
first of all detect iPad resolution:

@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);

These are em equivalent of 641px and 1024px.


Now detect high resolution:

@highResolution: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
          ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
          ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
          ~"only screen and (min-device-pixel-ratio: 1.5)";

Now we can combine these 2 variables in a media query like this:

@media @iPad, @highResolution{ .yourCssClass{} }

this will be valid just on iPad (or similar resolutions) with retina display (or similar pixel density).

Answer 3

I found the accepted solution not to work, as the compiler would complain the mixin was not defined. An alternative solution:

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 2;
    }
}

Answer 4

I had a LESS variable that I was using everywhere, including in calculations. For me, the variable had to be flexible and change for screen width, or all the calculations would have to be duplicated and either use a different variable or do a different calculation.

This is what I did, and now the same variable works properly wherever it is used.

It sets the variable in CSS, and changes it when javascript adds a conditional class. The LESS variable invokes the CSS variable.

IE 11 does not support, so be careful.

/* CSS var sets the width for normal screen size */
:root {
  --side-nav-width: 252px;
}

/* change the CSS var under conditions
   I think it would work in a media query but didn't test */
.side-nav-closed {
  --side-nav-width: 72px;
}


/* The LESS var correctly invokes whichever width applies */
@side-nav-width: var(--side-nav-width);

Answer 5

That's a little hackish, but a possible solution is to set the font-size for a wrapper element and set all units to em:

HTML:

<div id="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

LESS:

#wrap 
    {
    font-size: 100px;
    width: 10em; // = 1000px;
    @media all and (max-width: 768px)
        {
        font-size: 60px;
        }
    .child1
        {
        width: 5em; // 500px normally, 300px on small screens
        }
    .child1
        {
        width: 2.5em; // 250px normally, 150px on small screens
        }
    }

That of course does not work if you have elements that contain text AND children.

Answer 6

I know I'm late with my answer but someone may find this useful.

You can move your styles to a separate file

// styles.less
.foo {
  width: 100px * @ratio;
}

And then import the file multiple times after changing variables' values

// main.less
@ratio: 1; // initial value

@media all and (max-width: 768px) {
  @ratio: 1;
  @import (multiple) "styles";
}

@media all and (min-width: 769px) {
  @ratio: 2;
  @import (multiple) "styles";
}

Note that (multiple) is important here

Compiled code will look like this

// main.css
@media all and (max-width: 768px) {
  .foo {
    width: 100px;
  }
}
@media all and (min-width: 769px) {
  .foo {
    width: 200px;
  }
}