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.

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

Nested @media rules render different from Ruby SASS #185

Closed
mgreter opened this Issue Nov 14, 2013 · 11 comments

Comments

Projects
None yet
10 participants
@mgreter
Copy link
Contributor

mgreter commented Nov 14, 2013

Hi everybody

Nested @media rules are not rendered the same as with Ruby SASS.

Source SCSS File:

@media only screen and (max-width : 100px) {
    .outer { width: 10px; }
    @media only screen and (max-width : 200px) {
        .inner { width: 20px; }
    }
}

Libsass output:

@media only screen and (max-width: 100px) {
  .outer {
    width: 10px; }
  @media only screen and (max-width: 200px) {
    .inner {
      width: 20px; } } }

Ruby SASS output:

@media only screen and (max-width: 100px) {
  .outer {
    width: 10px; } }
@media only screen and (max-width: 100px) and (max-width: 200px) {
  .inner {
    width: 20px; } }

Although libsass output is valid css3, it's not valid css2.1.
For some more info see: http://stackoverflow.com/a/11747166

Thanks and have a nice day!

@akhleung

This comment has been minimized.

Copy link

akhleung commented Nov 14, 2013

Hmm, looks like Sass does some boolean algebra on nested media queries ... thanks for the report!

@lunelson

This comment has been minimized.

Copy link

lunelson commented Feb 10, 2014

Also with nesting retina media queries inside a width query. This Sassmeister gist illustrates it: if you switch compilers in the control panel you can see how ruby-sass 3.3 combines them correctly but libsass simply writes it out nested:

http://sassmeister.com/gist/8914969

@timbz

This comment has been minimized.

Copy link

timbz commented Mar 24, 2014

the ruby code should be in Query::merge()
https://github.com/nex3/sass/blob/stable/lib/sass/media.rb

@JeroenVdb

This comment has been minimized.

Copy link

JeroenVdb commented Jun 30, 2014

Does someone have a (temporarily) workaround for this problem?

@DedRain

This comment has been minimized.

Copy link

DedRain commented Aug 8, 2014

Hi all, any progress with this?

@hcatlin

This comment has been minimized.

Copy link
Member

hcatlin commented Oct 3, 2014

I'm going to open a new issue on this, since the second one seems like a different issue.

@hcatlin hcatlin closed this Oct 3, 2014

@hcatlin

This comment has been minimized.

Copy link
Member

hcatlin commented Oct 3, 2014

Oh shit, totally misread this. Sorry, I thought that was a merge against the original issue above. Sorry, missed that it's never been addressed at all.

@xzyfer

This comment has been minimized.

Copy link
Contributor

xzyfer commented Dec 9, 2014

I've started looking into this. It's one of the few major blockers IMHO.

@xzyfer xzyfer self-assigned this Dec 9, 2014

@xzyfer xzyfer modified the milestones: 3.1, 3.2 Dec 21, 2014

@silvenon silvenon referenced this issue Dec 21, 2014

Merged

Use libsass #247

This was referenced Dec 22, 2014

@xzyfer xzyfer referenced this issue Dec 30, 2014

Closed

[3.2] Bubble media queries #790

7 of 7 tasks complete

@xzyfer xzyfer modified the milestone: 3.2 Jan 3, 2015

@xzyfer xzyfer referenced this issue Jan 4, 2015

Merged

[3.2] Bubble media queries #800

7 of 7 tasks complete

@xzyfer xzyfer closed this in #800 Jan 5, 2015

guerrero pushed a commit to guerrero/web-starter-kit that referenced this issue Jan 7, 2015

@xzyfer

This comment has been minimized.

Copy link
Contributor

xzyfer commented Jan 17, 2015

This fixed via #800 and will be in 3.2.

anlutro pushed a commit to alprs/libsass that referenced this issue Feb 2, 2015

@msikma

This comment has been minimized.

Copy link

msikma commented Feb 10, 2015

I'm very glad this will be fixed with 3.2, this will make it easy to do e.g. retina-specific code inside code blocks for specific responsive sizes. Hoping the next release is finalized soon, any guesses as to when it'll be ready?

@xzyfer

This comment has been minimized.

Copy link
Contributor

xzyfer commented Feb 15, 2015

@msikma it's hard to say at the moment. You can #812 to keep up to date on the 3.2 release.

@hcatlin hcatlin changed the title Nested @media rules render different from Ruby SASS Nested @media rules render different from Ruby SASS [$15] Feb 21, 2015

@hcatlin hcatlin added the bounty label Feb 21, 2015

@hcatlin hcatlin changed the title Nested @media rules render different from Ruby SASS [$15] Nested @media rules render different from Ruby SASS Jan 30, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.