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

image() mixin doesn't work right inside @media queries #157

Closed
rstacruz opened this issue Dec 30, 2012 · 3 comments
Closed

image() mixin doesn't work right inside @media queries #157

rstacruz opened this issue Dec 30, 2012 · 3 comments

Comments

@rstacruz
Copy link
Contributor

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

@import nib
@media (max-width: 400px)
  .title
    display: block
  .logo
    image: 'logo.png'

Expected output

@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;
  }
}

Actual output

@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;
    }
}
}
@rstacruz
Copy link
Contributor Author

Hm, this actually seems to be okay: http://stackoverflow.com/questions/11746581/nesting-media-rules-in-css haven't tested it extensively though.

@rstacruz
Copy link
Contributor Author

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

@vslinko
Copy link

vslinko commented Jan 11, 2013

👍 Totally agree. I have many mixins like retina-background-phone and others.

@rstacruz rstacruz closed this as completed Mar 4, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants