cloudhead/less.js — Issue #544: @media queries & mixins not parsed correctly
Author: samjarrett
Created: 2012-01-04 05:08:29+00:00
State: open

Hey guys,

I think that the syntax mentioned by @tylertate on issue #152 if implemented would solve this issue, but thought I'd raise that the following less does not parse correctly:

**Input:**

```css
.classone {
width: 50%;
}

@media only screen and (max-width: 767px) {
.classone {
width: 100%;
}
}

.classtwo {
.classone;
}
```

**Expected result:**
I'd expect that both the top-level .classone rules are copied, as well as the media specific rules for .classtwo. The generated result I expected looked something like...

```css
.classone {
width: 50%;
}

@media only screen and (max-width: 767px) {
.classone {
width: 100%;
}
}

.classtwo {
width: 50%;
}

@media only screen and (max-width: 767px) {
.classtwo {
width: 100%;
}
}
```

**Actual result:**
The result for .classtwo lacks the @media declaration completely, and the following is what is generated:

```css
.classone {
width: 50%;
}

@media only screen and (max-width: 767px) {
.classone {
width: 100%;
}
}

.classtwo {
width: 50%;
}
```