Unclaimed project
Are you a maintainer of sass-mediaqueries? Claim this project to take control of your public changelog and roadmap.
Changelog
Media Queries mixins for Sass - fully customizable and very easy to use.
mq($media-type: 'only screen', $args...)
Generator allows you to create custom media-queries mixins by passing keywords arguments based on w3c media features specification (make sure you always provide key and value).
It's also a syntactic sugar for the standard media queries syntax (CSS).
Examples:
@include mq($max-width: 1000px) {
...
}
// will generate
@media only screen and (max-width: 1000px) {
...
}
Creating new mixins (like max-screen) is even easier:
@mixin max-screen($max)
@include mq($max-width: $max) {
@content;
}
}
// usage
@include max-screen(1000px) {
...
}
// will generate
@media only screen and (max-width: 1000px) {
...
}
Or if you want to change $media-type and other properies:
@mixin custom-device($min, $max)
@include mq($media-type: 'all', $min-width: $min, $max-width: $max) {
@content;
}
}
// usage
@include custom-device(500px, 1000px) {
...
}
// will generate
@media all and (min-width: 500px) and (max-width: 1000px) {
...
}
The new generator, allowed me to cleanup the main file and removed ~100 LOC.
I also got rid of iphone3 mixin because stats show that there is no point of supporting this device anymore.
Enjoy.