mobile-first-mq

mobile-first media queries for develop responsive layouts

You need create a few variables and assign them a value:

• $mq-sm: 576px;
• $mq-md: 768px;
• $mq-lg: 992px;
• $mq-xl: 1200px;

Then you need @import a _index.scss from a node_modules (Honestly, order doesn't matter. You may include file first)

The complete preparing to work with this package seems like:

• $sm: 480px;
• $md: 760px;
• $lg: 1340px;
• $xl: 1880px;

@import '../node_modules/media-queries/_index.scss'

And then you may write your awesome code

Every calling mixins from _index.scss will compile in

@media screen and (min-width: 760px) {
  /* some code; */
}

Instance of using:

@import "./mobile-first-mq/index";

$mq-md: 200px;
$mq-lg: 300px;
$mq-xl: 400px;

.colors {
  color: red;
  @include medium-devices {
    color: blue;
  }
  @include large-devices {
    color: green;
  }
  @include extra-large-devices {
    color: purple;
  }
}

will compile to

.colors {
  color: red;
}

@media screen and (min-width: 200px) {
  .colors {
    color: blue;
  }
}

@media screen and (min-width: 300px) {
  .colors {
    color: green;
  }
}

@media screen and (min-width: 400px) {
  .colors {
    color: purple;
  }
}

If you will use this mixins, you are really need use compression tools, like mq-packer