sassifaction-mq

1.0.0 • Public • Published

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

Package Sidebar

Install

npm i sassifaction-mq

Weekly Downloads

0

Version

1.0.0

License

Apache 2.0

Last publish

Collaborators

  • sturobson