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

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);