Support variables inside @media identifiers

This solution is somewhat hacky, the @media element really deserves a
Node subclass and it's own parsing rules. What's still missing is LESS
variables in grouped media queries like:

    @singleQuery: ~"(max-width: 500px)";
    @media screen, @singleQuery {
        set { padding: 3 3 3 3; }
    }

Fixes #18

lesscpy/lessc/parser.py

@@ -514,6 +514,14 @@ class LessParser(object):
         """
         p[0] = list(p)[1:]
 
+    def p_ident_media_var(self, p):
+        """ ident_parts               : css_media t_ws t_popen word ':' variable t_pclose
+        """
+        p[0] = list(p)[1:]
+        if utility.is_variable(p[0][5]):
+            var = self.scope.variables(''.join(p[0][5]))
+            p[0][5] = var.value[0]
+
     def p_selector(self, p):
         """ selector                  : '*'
                                       | '+'

lesscpy/test/css/media.css

@@ -34,3 +34,8 @@
 		display: none !important;
 	}
 }
+@media (min-width:12px) {
+	body {
+		margin: 0 auto;
+	}
+}

lesscpy/test/css/media.min.css

@@ -6,3 +6,4 @@ body{max-width:35em;margin:0 auto;}}
 @media screen{body{max-width:480;}}
 @media all and (orientation:portrait){aside{float:none;}}
 @media (min-width:768px)and (max-width: 979px){.hidden-desktop{display:none !important;}}
+@media (min-width:12px){body{margin:0 auto;}}

lesscpy/test/less/media.less

@@ -42,3 +42,8 @@
 @media (min-width: 768px) and (max-width: 979px) {
 	.hidden-desktop    { display: none !important; }
 }
+
+@minwidth: 12px;
+@media (min-width: @minwidth) {
+    body { margin: 0 auto; }
+}