less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17k stars 3.41k forks source link

Produces invalid media query from nested conditions #3694

Open Knutas opened 2 years ago

Knutas commented 2 years ago

To reproduce:

@media (max-width: 500px) {
  @media screen {
    body {
      background-color: red;
    }
  }
}

Current behavior:

Produces invalid css with and screen at the end of the media query.

@media (max-width: 500px) and screen {
  body {
    background-color: red;
  }
}

Expected behavior:

screen and added to the start of the media query.

@media screen and (max-width: 500px) {
  body {
    background-color: red;
  }
}

Environment information:

http://lesscss.org/less-preview/

guelate commented 2 years ago

Hello , I have solved your problem :

reproduice

@media screen {           @media (max-width: 500px) {                      body {                              background-color: red;                      }            } }

you just had to reverse "screen" and "(max-width: 500px)"