Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@media queries & mixins not parsed correctly #544

Closed
samjarrett opened this issue Jan 4, 2012 · 6 comments
Closed

@media queries & mixins not parsed correctly #544

samjarrett opened this issue Jan 4, 2012 · 6 comments
Labels
bug consider closing low priority

Comments

@samjarrett
Copy link

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:

.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...

.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:

.classone {
    width: 50%;
}

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

.classtwo {
    width: 50%;
}
@matthew-dean
Copy link
Member

Your output is what I would expect. A curly braced selector creates a new variable context. Hence, .classone in the .classtwo context only "sees" the class that's in scope.

I agree that there's some special cases or functions needed for media query syntax, but what you're expecting is contrary to how variable scoping currently works in LESS.

@lukeapage
Copy link
Member

this might be fixed with 1.3 ? Have you checked?

@samjarrett
Copy link
Author

Hey @agatronic, thanks for pointing this out.
The syntax is different, but the @media bubbling does indeed cover off what I'd requested.

Cheers!

@abreu-dev
Copy link

Why is this issue closed?

I have exactly the same problem with twitter bootstrap, when I try to "extend" the .container class, for example.

It's confusing for me this behavior because, if I have this:

.a {
  padding-top: 10px;
}

(...)

//another scope
.a {
  padding-left: 30px;
}

.b {
  .a;
}

then I get

.b {
  padding-top: 10px;
  padding-left: 30px;
}

Why media queries don't have the same behavior?

@lukeapage lukeapage reopened this Aug 17, 2012
@lukeapage
Copy link
Member

@andreabreu98 I don't exactly get what you are saying.

Are you saying that media queries should be grouped? If so.. there was a bug for that in #950

@lukeapage
Copy link
Member

closing again due to lack of response.

@SomMeri SomMeri mentioned this issue Dec 27, 2012
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug consider closing low priority
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lukeapage @matthew-dean @samjarrett @abreu-dev