can't handle nested media rules?

[pkyeck]

I have something like this

@media only screen and (max-width: 940px) {
  .test {
    background-color: red;
  }

  @media (min-resolution: 144dpi) {
    .test {
      background-color: green;
    }
  }
}

@media (min-resolution: 144dpi) {
  .test {
    background-color: yellow;
  }
}

but this gets converted to

@media (min-resolution: 144dpi) {
  .test {
    background-color: yellow;
  }
}

@media only screen and (max-width: 940px) {
  .test {
    background-color: red;
  }
}

so I'll lose my nested media rules :(

[fesor]

CSS doesn't allow to use nested media queries. You should use and operator. Also you may want to use CSS preprocessors like LESS or SASS:

@media only screen and (max-width: 940px) {
  .test {
    background-color: red;
  }

  @media (min-resolution: 144dpi) {
    .test {
      background-color: green;
    }
  }
}

@media (min-resolution: 144dpi) {
  .test {
    background-color: yellow;
  }
}

Less will compile it to

@media only screen and (max-width: 940px) {
  .test {
    background-color: red;
  }
}
@media only screen and (max-width: 940px) and (min-resolution: 144dpi) {
  .test {
    background-color: green;
  }
}
@media (min-resolution: 144dpi) {
  .test {
    background-color: yellow;
  }
}