sassifaction-mq
v1.0.0
Published
A simple media query mixin for using with eyeglass
Downloads
5
Maintainers
Readme
sassifaction-mq
An experiement, this should hopefully work with eyeglass
This mixin allows you to quickly create a media query in your project. With the ability to define the breakpoint in PX (which get's converted into EMs). There's also the ability to define min/max and width/height (with defaults to min-width). There's also an option to duplicate the content into a OldIE conditionally classed bit of CSS. You would use it like this
body {
@include (280) {
background-color: blue;
}
@include mq(600) {
background-color: red;
}
@include mq(1200, $ie: true) {
font-size: 110%;
}
}
Which would give you this compiled CSS
@media (min-width: 17.5em) {
body {
background-color: blue;
}
}
@media (min-width: 37.5em) {
body {
background-color: red;
}
}
.lt-ie9 body {
font-size: 110%;
}
@media (min-width: 75em) {
body {
font-size: 110%;
}
}
To install:
npm install sassifaction-mq --save-dev