I've just discovered that you can't seem to nest @media queries and
use the parent selector reference. I think this would be massively
useful to achieve something like:
@mixin dual-bg-image($image) {
background-image: image_url($image);
// target iphone4
@media only screen and (-webkit-min-device-pixel-ratio: 2), only
screen and (min-device-pixel-ratio: 2) & {
background-image: image_url('hires-'+$image);
}
}
.myelement {
@include dual-bg-image('myimage.png');
}
To produce the following CSS:
.myelement {
background-image: url('/images/myimage.png');
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only
screen and (min-device-pixel-ratio: 2) {
.myelement {
background-image: url('/images/hires-myimage.png');
}
}
Any thoughts?
--
You received this message because you are subscribed to the Google Groups
"Haml" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to [email protected].
For more options, visit this group at http://groups.google.com/group/haml?hl=en.
