Improved support for media queries

[ingokegel]

Interpolation: Now media queries of the form media @media #{$d}, @media #{$d, $r} and @media #{$d}, #{$r} are handled correctly
Nesting: Media queries can now be nested in CSS rules

This is not perfect and the media statement parsing should really be redone, There are several cases I can think of that will still not work. I just did what I needed to be able to compile my SASS files. It's better than before and maybe you can use it as a starting point.

---

This change is 

[Flaburgan]

Would this pull request allows this code

$breakpoint: 642px;
body > header {
  position: fixed;
  @media screen and (min-width: $breakpoint + 1) {
    nav {
      position: absolute;
    }
  }
}

to be compiled into

body > header {
  position: fixed; }
  @media screen and (min-width: 643px) {
    body > header nav {
      position: absolute; } } }

?

This sample include:

• Media query nested inside body > header
• Usage of a variable inside a media query
• Operation with variable inside a media query

cc @pascalheraud

[ingokegel]

I don't think so. I did not attempt to fix the media statement parsing. I just added support for the cases where the media statement is an interpolation.

[Flaburgan]

@hesara @Artur- any chance you can have a look at that? I tried to register on https://dev.vaadin.com to open a discussion but I had a Trac detected an internal error: KeyError: 'recaptcha_challenge_field' failure...