H
H
HelpSophie2019-05-27 02:52:47
css
HelpSophie, 2019-05-27 02:52:47

How to correctly write nested media in LESS?

@tablet-width: 660px;
@retina-dpi:  144dpi;
@retina-dppx: 1.5dppx;

@retina: (min-resolution: @retina-dpi), (min-resolution: @retina-dppx);

@media (min-width: @tablet-width) {
  .block {
    background: red;
  }

  @media (min-resolution: @retina-dpi), (min-resolution: @retina-dppx) {
  .block {
    background: green;
    }
  }
}

That's how it all works.
But I want to introduce a variable @retinaand write something like:
@media @retina {}
I already tried to put quotes, tildes @{retina}and ~"@{retina}"brackets in the variable itself.
But something doesn't work for me.
How to write correctly so that the output is:
@media (min-width: 660px) {
  .block {
    background: red;
    }
}
@media (min-width: 660px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 660px) and (min-resolution: 144dpi), (min-width: 660px) and (min-resolution: 1.5dppx) {
  .block {
    background: green;
    }
}

-webkit autofixer draws

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question