We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
This is because Stylus doesn't support nested media queries yet, but trying to use image() inside a media query yields you unexpected results.
image()
Practical use case: you want to use a smaller logo in smaller screens, and want them to be retina-compliant.
@import nib @media (max-width: 400px) .title display: block .logo image: 'logo.png'
@media (max-width: 400px) { .title { display: block; } .logo { background-image: url("logo.png"); } } @media (max-width: 400px) and (-webkit-min-device-pixel-ratio: 1.5) { .logo { background-image: url("logo@2x.png"); -webkit-background-size: auto auto; -moz-background-size: auto auto; background-size: auto auto; } }
@media (max-width: 400px) { .title { display: block; } .logo { background-image: url("logo.png"); } @media all and (-webkit-min-device-pixel-ratio: 1.5) { { background-image: url("logo@2x.png"); -webkit-background-size: auto auto; -moz-background-size: auto auto; background-size: auto auto; } } }
The text was updated successfully, but these errors were encountered:
Hm, this actually seems to be okay: http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css haven't tested it extensively though.
Sorry, something went wrong.
...just tested it and this simple test fails in chrome:
@media screen { @media (min-width: 200px) { .section { border: solid 10px #f00; } } }
...so yeah, nested media queries have to be flattened.
👍 Totally agree. I have many mixins like retina-background-phone and others.
retina-background-phone
No branches or pull requests
This is because Stylus doesn't support nested media queries yet, but trying to use
image()
inside a media query yields you unexpected results.Practical use case: you want to use a smaller logo in smaller screens, and want them to be retina-compliant.
Input
Expected output
Actual output
The text was updated successfully, but these errors were encountered: