Change LESS variable if media query conditional is met

Question

I wish to change some LESS variables (for maintaining high-res image pathways) if certain media query conditionals are met throughout my stylesheet, but I can't seem to get it to work.

// Default
@logo:                   'logo.png';
@sprite:                 'sprite.png';

// High resolution displays
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    @logo:               'logo@2x.png';
    @sprite:             'sprite@2x.png';
}

Perhaps there's an easier solution to this?

Look at this possible duplicate question: [css, change less variable with @media](http://stackoverflow.com/questions/15927805/css-change-less-variable-with-media). That answer has a link to another similar question. Basically this cannot be done (those answers tell you why). — ScottS, Jun 12 '13 at 13:04
Possible duplicate of [css, change less variable with @media](https://stackoverflow.com/questions/15927805/css-change-less-variable-with-media) — goto, Mar 06 '18 at 11:08

Hai Nguyen · Answer 1 · 2014-03-27T21:26:14.050

Instead of changing the name of the image files to accommodate high-res images, I store all of my high-res images in a separate "2x" folder with the same name.

@CDNURL: "http://cdn.mycommany.com/assets/";
@CDNURL-High-Res: "@{CDNURL}2x/";

@highdensity: ~"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)";

.BGImage-HD(@image) {
  background-image: url('@{CDNURL}@{image}'); 

  @media @highdensity {
    background-image: url('@{CDNURL-High-Res}@{image}');
  }
}

//Usage
.logo {
  .BGImage-HD("logo.png");
}

Change LESS variable if media query conditional is met

1 Answers1